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内 容 提 要 
很 多 人 对 JavaScript 这 门 语言 的 印象 都 
复杂 的 概念 
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EXE 
也 无 法 真正 理解 它们 。 在 本 
语言 内 部 的 机 制 。 























本 书 既 适合 JavaScript 语 
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易学 ， 很 容易 上 手 。JavaScript 语言 本 身 有 很 多 
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语言 的 使 用 者 不 必 深 入 理解 这 些 概 念 也 可 以 编写 出 功能 全 面 的 应 用 。 殊 不 知 ， 这 些 
复杂 精妙 的 概念 才 是 语言 的 精髓 ， 即 使 是 经 验 丰富 的 JavaScript 开发 人 员 ， 如 果 没 有 认真 学 习 的 话 
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区 中 ， 我 们 要 直面 当前 JavaScript 开发 者 不 求 甚 解 的 大 趋势 ， 深 入 到 
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O'Reilly Media 通过 图 书 、 杂 志 、 在 线 服 务 、 调 查 研 究 和 会 议 等 方式 传播 创新 知识 。 
自 1978 年 开始 ，O’Reilly 一 直 都 是 前 沿 发 展 的 见证 者 和 推动 者 。 超 级 极 客 们 正在 开创 
着 未 来 ， 而 我 们 关 广 真正 重要 的 技术 趋势 一 一 通过 放大 那些 “细微 的 信号 ”来 刺激 社 
会 对 新 科技 的 应 用 。 作 为 技术 社区 中 活跃 的 参与 者 ，O’Reilly 的 发 展 充满 了 对 创新 的 
倡导 、 创 造 和 发 扬 光 大 。 




















O'Reilly 为 软件 开发 人 员 带 来 革命 性 的 “动物 书 ”; 创建 第 一 个 商业 网 站 (GNN); 组 
组 了 影响 深远 的 开放 源 代 码 峰 会 ， 以 至 于 开源 软件 运动 以 此 命名 ， 创 立 了 Make 杂志 ， 
从 而 成 为 DIY 革命 的 主要 先锋 ， 公 司 一 如 既往 地 通过 多 种 形式 缔结 信息 与 人 的 纽带 。 
O'Reilly 的 会 议和 峰会 集聚 了 众多 超级 极 客 和 高 瞻 远 瞩 的 商业 领袖 ， 共 同 描绘 出 开创 
新 产业 的 革命 性 思想 。 作 为 技术 人 士 获取 信息 的 选择 ，O"Reilly 现在 还 将 先锋 专家 的 
知识 传递 给 普通 的 计算 机 用 户 。 无 论 是 通过 书籍 出 版 ， 在 线 服 务 或 者 面授 课程 ， 每 一 












































项 O'Reilly 的 产品 都 反映 了 公司 不 可 动摇 的 理念 一 一 信息 是 激发 创新 的 力量 。 
业界 评论 
"O'Reilly Radar HE v 3p se." 





Wired 


"O'Reilly 凭借 一 系列 〈 真 希望 当初 我 也 想到 了 ) 非凡 想法 建立 了 数 百 万 美元 的 业务 。” 


Business 2.0 





"O'Reilly Conference 是 聚集 关键 思想 领袖 的 绝对 典范 。” 
— —CRN 


“一 本 O'Reilly 的 书 就 代表 一 个 有 用 、 有 前 途 、 需 要 学 习 的 主题 。 
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"Tim 是 位 特 立 独行 的 商人 ， 他 不 光 放 眼 于 最 长 远 、 最 广阔 的 视野 并 且 切 实地 按照 
Yogi Berra 的 建议 去 做 了 :“ 如 果 你 在 路 上 遇 到 岔路 口 ， 走 小 路 ( 岔路 ) ”回顾 过 去 
Tim 似乎 每 一 次 都 选择 了 小 路 ,而 且 有 几 次 都 是 一 闪 即 逝 的 机 会 ， 尽管 大 路 也 不 错 。” 
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在 互联 网 发 展 的 早期 ，JavaScript 就 已 经 成 为 了 支撑 网 页 内 容 交 互 体验 的 基础 技术 。 那 时 
JavaScript 的 作用 可 能 仅仅 是 生成 一 些 内 烁 的 鼠标 轨迹 或 者 烦人 的 弹出 窗口 ， 但 是 经 过 了 
KH 20 年 的 发 展 ，JavaScript 的 技术 和 能 力 都 发 生 了 天 翻 地 用 的 变化 ， 现 在 的 JavaScript 
毫 无 疑问 已 经 成 为 了 世界 上 使 用 范围 最 广 的 软件 平台 一 一 互联 网 的 核心 技术 。 


但 是 作为 一 个 语言 来 说 ， 它 总 是 成 为 大 家 批评 的 对 象 ， 部 分 原因 是 它 有 很 多 历史 遗留 问 
题 ， 但 主要 原因 是 它 的 设计 哲学 有 问题 。 就 像 Brendan Eich 曾经 说 过 的 ，JavaScript 甚至 连 
名 字 都 给 人 一 种 “ 蠢 弟 弟 ” 的 感觉 ， 就 像 是 它 更 成 熟 的 大 哥 Java 的 不 完整 版 本 。 不 过 名 字 
只 不 过 是 营销 策略 上 的 一 个 意外 ， 这 两 个 语言 有 许多 本 质 上 的 区 别 。JavaScript 和 Java 的 
关系 ， 就 像 Carnival (嘉年华 ) 和 Car GAE) 的 关系 一 样 ， 八 午 子 打 不 着 。 









































JavaScript 借鉴 了 许多 语言 的 概念 和 语法 ， 比 如 C 风格 的 过 程式 编程 以 及 不 太 明 显 的 
Scheme/List 风格 的 国 数 式 编程 ， 因 此 吸引 了 许多 开发 者 ， 甚 至 是 那些 不 会 编程 的 新 手 。 用 
JavaScript 来 编写 “Hello World” 是 非常 简单 的 ， 因 此 这 门 语言 很 有 吸引 力 并 且 很 好 上 手 。 
































虽然 JavaScript 可 能 是 最 早出 现 的 语言 之 一 ， 但 是 由 于 其 本 身 的 特殊 性 ， 相 比 其 他 语言 ， 能 
真正 掌握 JavaScript 的 人 比较 少 。 如 果 想 用 C、C++ 这 样 的 语言 编写 功能 全 面 的 程序 ， 那 需 
要 对 语言 有 很 深 的 了 解 。 但 是 对 于 JavaScript 来 说 ， 编 写 功 能 全 面 的 程序 仅仅 是 冰山 一 角 。 
JavaScript 语言 本 质 上 有 许多 复杂 的 概念 ， 但 是 却 用 一 种 看 起 来 比较 简单 的 方式 体现 出 来 ， 
比如 回调 函数 ， 因 此 JavaScript 开发 者 通常 只 是 简单 地 使 用 这 些 特性 ， 并 不 会 关心 语言 
部 的 实现 原理 。 











JavaScript 既是 一 门 充 满 吸引 力 、 简 单 易 用 的 语言 ， 又 是 一 门 具有 许多 复杂 微妙 技术 的 语 
言 ， 即 使 是 经 验 丰富 的 JavaScript 开发 者 ， 如 果 没 有 认真 学 习 的 话 也 无 法 真正 理解 它们 。 




















VIII 


这 就 是 JavaScript 的 矛盾 之 处 ,也 是 这 门 语 言 的 阿 喀 琉 斯 之 中 o H F JavaScript 不 必 理 解 就 
可 以 使 用 ， 因 此 通常 来 说 很 难 真正 理解 语言 本 身 ， 这 就 是 我 们 面临 的 挑战 。 
使 命 


如 果 每 次 遇 到 JavaScript 中 出 乎 意料 的 行为 时 ， 你 的 反应 就 是 把 它 加 入 墨 名 单 (很 多 人 都 
是 这 么 做 的 )， 那 用 不 了 多 久 你 就 会 把 JavaScript 语言 真正 的 多 样 性 全 部 排除 。 








剩 下 的 部 分 就 是 非常 著名 的 “好 的 部 分 ”(Good Parts) ， 但 是 亲爱 的 读者 们 ， 我 县 请 你 们 
把 它 称 作 “简单 的 部 分 “安全 的 部 分 ”甚至 “不 完整 的 部 分 "。 


“你 不 知道 的 JavaScript” 系 列 丛 书 要 做 的 事 恰好 相反 : 学 习 并 且 深 入 理解 整个 JavaScript, 
尤其 是 那些 “ 难 的 部 分 ”。 


在 本 书 中 ， 我 们 要 直面 当前 JavaScript 开发 者 不 求 其 解 的 大 趋势 ， 他 们 往往 不 会 深入 理解 
语言 内 部 的 机 制 ， 遇 到 困难 就 会 退缩 。 我 们 要 做 的 恰好 相反 ， 不 是 退缩 ， 而 是 继续 前 进 。 
































你 们 应 当 像 我 一 样 ， 不 满足 于 只 是 让 代码 正常 工作 ， 而 是 想 要 弄 清 楚 “ 为 什么 ”。 我 希望 
尔 能 勇于 挑战 这 条 崎 鸯 颠 壬 的 “ 少 有 人 走 的 路 "， 拥 抱 整 个 JavaScript。 和 掌握 了 这 些 知 识 
后 ， 无 论 什么 技术 、 框 架 和 流行 词语 你 都 能 轻松 理解 。 














这 个 系列 中 的 每 本 书 专注 于 语言 中 一 个 最 容易 被 误解 或 者 最 难 理解 的 核心 部 分 ， 进 行 深 
入 、 详 尽 的 介绍 。 在 阅读 本 书 时 ， 你 应 当 审视 自己 对 于 JavaScript 的 理解 ， 仔 细 思 考 书 中 
讲解 的 理论 和 那些 “你 需要 知道 ”的 东西 。 





























现在 你 所 理解 的 JavaScript 很 可 能 是 从 别人 那里 学 来 的 不 完整 版 。 这 样 的 JavaScript HER 
正 的 JavaScript 的 影子 。 学 完 这 个 系列 之 后 ， 你 就 会 掌握 真正 的 JavaScript。 读 下 去 吧 ， 我 
的 朋友 ，JavaScript 恭候 你 的 光临 。 





小 结 


JavaScript 非常 特殊 ， 只 学 一 部 分 的 话 非常 简单 ， 但 是 想 要 完整 地 学 习 会 很 难 (就 算 学 到 
够 用 也 不 容易 )。 当 开发 者 感到 迷惑 时 ， 他 们 通常 会 责怪 语言 本 身 ， 而 不 是 怪 自己 对 语言 
缺乏 了 解 。 这 个 系列 就 是 为 了 解决 这 个 问题 ， 让 你 打 心眼 儿 里 欣赏 这 门 语言 。 




















本 书 中 的 许多 例子 都 需要 运行 在 即将 到 来 的 现代 JavaScript 引擎 环境 中 ， 比 
如 ES6。 部 分 代码 在 旧 (ES6 之 前 的 ) 引擎 上 可 能 无 法 正常 运行 。 








注 1: 指 某 人 或 某 事 物 的 最 大 或 者 唯一 弱点 ， 即 蛙 门 关键 所 在 。 一 一 译 者 注 
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本 书 排版 约定 
本 书 中 使 用 以 下 排版 约定 。 
- 楷体 





表示 新 的 术语 。 


等 宽 字 体 
表示 代码 段 以 及 段落 中 的 程序 元 素 ， 比 如 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 环 境 变 
量 、 语 句 以 及 关键 字 。 








表示 命令 中 不 可 改动 的 部 分 。 


表示 将 由 用 户 提供 的 值 (或 由 上 下 文 确定 的 值 ) 替换 的 文本 。 


这 个 图 标 表 示 提 示 或 建议 。 


这 个 图 标 表示 重要 说 明 。 


这 个 图 标 表 示警 告 或 提醒 。 





使 用 代码 示例 


可 以 在 这 里 下 载 本 书 第 一 部 分 “作用 域 和 闭 包 ” 随 附 的 资料 (代码 示例 、 练 习题 等 ) : 
http://bit.|ly/1cSHEWF, 


可 以 在 这 里 下 载 本 书 第 二 部 分 “this 和 对 象 原型 ” 随 附 的 资料 〈 代 码 示例 、 练 习题 等 ) : 
http://bit.ly/ydkjs-this-code 


让 本 书 助 你 一 臂 之 力 。 也 许 你 需要 在 自己 的 程序 或 文档 中 用 到 本 书 中 的 代码 。 除 非 大 段 大 
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段 地 使 用 ， 否 则 不 必 与 我 们 联系 取得 授权 。 例 如 ， 无 需 请 求 许可 ， 就 可 以 用 本 书 中 的 几 自 
代码 写成 一 个 程序 。 但 是 销售 或 者 发 布 O'Reilly 图 书 中 代码 的 光盘 则 必须 事先 获得 授权 。 
引用 书 中 的 代码 来 回答 问题 也 无 需 授 权 。 将 大 段 的 示例 代码 整合 到 你 自己 的 产品 文档 中 则 
必须 经 过 许可 。 

















使 用 我 们 的 代码 时 ， 和 希望 你 能 标明 它 的 出 处 ， 但 不 强求 。 出 处 信息 一 般 包括 书 名 、 作 者 、 
出 版 商 和 书号 ， 例 如 : Scope and Closures, Kyle Simpson 著 (O'Reilly，2014)。 版 权 所 有 ， 
978-1-491-33558-8, 








如 果 还 有 关于 使 用 代码 的 未 尽 事宜 ， 可 以 随时 与 我 们 联系 : permissions Qoreilly.com, 


Safari? Books Online 
Safari Books Online (http://www.safaribooksonline.com) 是 应 需 
Sa fa 及 时。 而 变 的 数字 图 书馆 。 它 同时 以 图 书 和 视频 的 形式 出 版 世界 顶级 
Books Online 技术 和 商务 作家 的 专业 作品 。 


Safari Books Online 是 技术 专家 、 软 件 开发 人 员 、Web 设计 师 、 商 务 人 士 和 创意 人 士 开 展 
调研 、 解 决 问 题 、 学 习 和 认证 培训 的 第 一 手 资料 。 
































对 于 组 织 团体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 的 定 
价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访问 O'Reilly Media, Prentice 
Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit 
Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM 
Redbooks, Packt, Adobe Press, FT Press, Apress, Manning. New Riders, McGraw-Hill, 
Jones & Bartlett, Course Technology 以 及 其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 正 
式 出 版 之 前 的 书稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 


请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 








美国 : 
O’Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 


中 国 : 
北京 市 西城 区 西直门 南大 街 2 号 成 铬 大 厦 C 座 807 (100035) 
奥 菜 利 技术 咨询 (北京) 有 限 公 司 
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O'Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘 误 表 、 示 
例 代码 以 及 其 他 信息 。 本 书 第 一 部 分 “作用 域 和 闭 包 ”的 网 址 是 http://oreil.ly/JS_scope_ 
closures。 本 书 第 二 部 分 “this 和 对 象 原型 ”的 网 址 是 http://bit.ly/ydk-js-this-object-prototypes。 

















对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电子 邮 件 到 : 


bookquestions G oreilly.com 





要 了 解 更 多 O'Reilly 图 书 、 培 训 课程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 


http://www.oreilly.com 








我 们 在 Facebook 的 地 址 如 下 : http://facebook.com/oreilly 
请 关注 我 们 的 Twitter 动态 : http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : http://www.youtube.com/oreillymedia 








要 查看 “你 不 知道 的 JavaScript” 系 列 从 书 中 的 全 部 图 书 ， 请 访问 : 
http://YouDontKnowJS.com 





第 一 部 分 





作用 域 和 闭 包 


[Æ] Kyle Simpson # 
BER 译 





小 时 候 ， 我 特别 喜欢 把 东西 拆 成 零 部 件 ， 然 后 再 重新 装 回去 一 一 旧 的 移动 电话 、 立 体 声音 
响 等 我 能 拿 到 的 一 切 物件 都 没 能 幸免 。 对 于 年 幼 的 我 来 说 ， 使 用 这 些 东 西 还 为 时 过 早 ， 但 
是 一 旦 它们 坏 了 ， 我 就 立刻 想 弄 清楚 它们 的 工作 原理 。 








记得 有 一 次 ,我 看 见 一 个 老式 收音 机 的 电路 板 ， 其 中 有 一 个 绰 满 铜 线 的 奇怪 长 管 。 我 不 知 
道 这 个 长 管 的 用 途 ， 所 以 立刻 开始 研究 它 。 它 有 什么 用 ? 为 什么 出 现在 收音 机 里 ? 为 什么 
它 看 起 来 和 电路 板 的 其 他 部 分 不 一 样 ? 为 什么 会 有 铜 线 缠绕 着 它 ?” 如 果 我 把 铜 线 拆 下 来 会 
发 生 什 么 ? 现在 我 知道 了 ， 这 是 一 个 在 晶体 管 收音 机 中 很 常见 的 、 由 缠绕 着 铀 线 的 铁 氧 体 
棒 制 成 的 环形 天 线 。 


你 是 否 也 曾 对 解答 各 种 各 样 的 为 什么 很 上 六 ?大 多 数 孩 子 都 会 。 事 实 上 ， 这 可 能 是 孩子 身 
上 我 最 喜欢 的 地 方 一 一 求知 欲 很 强 。 


很 遗憾 ， 现 在 我 从 事 着 一 份 专业 性 的 工作 ， 并 以 制作 一 些 东 西 来 度 日 。 而 我 儿 时 的 梦想 
是 有 一 天 能 够 制作 那些 被 我 拆 开 过 的 东西 。 当 然 ， 现 在 我 所 制作 的 大 部 分 东西 都 是 用 
JavaScript 做 成 的 ， 而 不 是 铁 氧 体 棒 …… 但 它们 很 相似 ! 尽管 我 曾经 一 度 非常 热爱 制作 东 
西 ， 但 是 现在 却 更 渴望 了 解 事物 的 运行 原理 。 我 经 党 寻找 解决 问题 或 修复 bug 的 最 佳 方 
法 ， 却 很 少 花 时 间 来 研究 我 所 使 用 的 工具 。 























这 也 是 为 什么 我 一 看 到 “你 不 知道 的 JavaScript” 系 列 图 书 就 很 激动 ， 因 为 JavaScript 的 
确 有 很 多 我 不 了 解 的 地 方 。 我 每 天 从 早 到 晚 都 在 使 用 JavaScript， 并 且 已 经 持续 了 好 几 年 ， 
但 我 真 的 了 解 它 了 吗 ? 答案 是 否定 的 。 当 然 ， 我 了 解 它 的 很 多 细 闻 ， 并 且 经 常 阅读 标准 文 
档 和 邮件 列表 中 的 内 容 ， 但 是 了 解 的 程度 低 于 我 内 心 那 个 六 岁 的 孩子 希望 我 达到 的 水 平 。 














第 一 部 分 “作用 域 和 闲 包 ” 是 一 个 非常 好 的 切入 点 。 它 对 于 如 我 一 般 的 受众 来 说 非常 有 用 
(希望 对 你 也 同样 有 用 )。 这 本 书 并 不 会 教 你 如 何 使 用 JavaScript， 但 是 它 会 让 你 意识 到 对 
于 其 内 部 的 运行 原理 你 可 能 了 解 得 并 不 多 。 同 时 这 本 书 出 现 的 时 机 也 非常 巧 : ES6 终于 稳 
定 下 来 了 ， 并 且 各 家 浏览 器 的 实现 工作 也 正在 逐步 展开 。 如 有 果 你 还 设 有 学 习 其 中 的 新 功能 
(比如 let 和 const)， 这 本 书 将 起 到 很 好 的 介绍 作用 。 


所 以 我 希望 你 能 喜欢 这 本 书 ， 尤 其 希望 Kyle 对 JavaScript 工作 原理 每 一 个 细节 的 批判 性 思 
考 会 渗透 到 你 的 思考 过 程 和 日 常 工作 中 。 知 其 然 ， 也 要 知 其 所 以 然 。 



































Shane Hudson 


www.shanehudson.net 
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值 进行 访问 或 修改 。 事 实 上 ， 正 是 这 种 储存 和 访问 变量 的 值 的 能 力 将 状态 带 给 了 程序 。 
车 没有 了 状态 这 个 概念 ， 程 序 虽然 也 能 够 执行 一 些 简 单 的 任务 ， 但 它 会 受到 高 度 限制 ， 做 
不 到 非常 有 趣 。 

但 是 将 变量 引入 程序 会 引起 几 个 很 有 意思 的 问题 ， 也 正 是 我 们 将 要 讨论 的 : 这 些 变量 住 在 
哪里 ? 换 句 话说， 它们 储存 在 哪里 ? 最 重要 的 是 ， 程 序 需 要 时 如 何 找到 它们 ? 




















这 些 问 题 说 明 需 要 一 套 设计 良好 的 规则 来 存储 变量 ， 并 且 之 后 可 以 方便 地 找到 这 些 变量 。 
这 套 规则 被 称 为 作用 域 。 





但 是 ， 究 竟 在 哪里 而 且 怎 样 设 置 这 些 作 用 域 的 规则 呢 ? 


1.1 编译 原理 


尽管 通常 将 JavaScript 归 类 为 “动态 ”或 “解释 执行 ”语言 ， 但 事实 上 它 是 一 门 编译 语言 。 
这 个 事实 对 你 来 说 可 能 显而易见 ， 也 可 能 你 闻所未闻 ， 取 决 于 你 接触 过 多 少 编程 语言 ， 具 
有 多 少 经 验 。 但 与 传统 的 编译 语言 不 同 ， 它 不 是 提前 编译 的 ， 编 译 结果 也 不 能 在 分 布 式 系 
统 中 进行 移植 。 


尽管 如 此 ，JavaScript 引擎 进 行 编译 的 步 又 和 传统 的 编译 语言 非常 相似 ， 在 某 些 环 市 可 能 
比 预想 的 要 复杂 。 












































在 传统 编译 语言 的 流程 中 ， 程 序 中 的 一 段 源 代 码 在 执行 之 前 会 经 历 三 个 步 又 ， 统 称 为 “ 编 








。 分 词 /词法 分 析 (Tokenizing/Lexing) 
这 个 过 程 会 将 由 字符 组 成 的 字符 串 分 解 成 【对 编程 语言 来 说 ) 有 意义 的 代码 块 ， 这 些 代 
码 块 被 称 为 词法 单元 (token)。 例 如 ， 考 虑 程序 var a = 2;。 这 段 程序 通常 会 被 分 解 成 
为 下 面 这 些 词法 单元 : var、a、=、2 、;。 空 格 是 否 会 被 当 作 词法 单元 ， 取 决 于 空格 在 
这 门 语 言 中 是 否 具有 意义 。 














分 词 (tokenizing) 和 词法 分 析 (Lexing) 之 间 的 区 别 是 非常 微妙 、 上 泌 的 ， 
主要 差异 在 于 词法 单元 的 识别 是 通过 有 状态 还 是 无 状态 的 方式 进行 的 。 简 
单 来 说 ， 如 果 词 法 单元 生成 器 在 判断 a 是 一 个 独立 的 词法 单元 还 是 其 他 词法 
单元 的 一 部 分 时 ， 调 用 的 是 有 状态 的 解析 规则 ， 那 么 这 个 过 程 就 被 称 为 词法 
分 析 。 



























































。 解析 /语法 分 析 (Parsing) 
这 个 过 程 是 将 词法 单元 流 (数组 ) 转换 成 一 个 由 元 素 逐 级 舱 套 所 组 成 的 代表 了 程序 语法 
结构 的 树 。 这 个 树 被 称 为 “抽象 语法 树 ”(Abstract Syntax Tree, AST), 
var a = 2; 的 抽象 语法 树 中 可 能 会 有 一 个 叫 作 VartableDeclaration 的 顶级 节点 ， 接 下 
来 是 一 个 叫 作 Identifier ( 它 的 值 是 a) 的 子 节点 ,以 及 一 个 叫 作 AssignmentExpression 
的 子 节点 。AssignmentExpression 节点 有 一 个 叫 作 NumericLiteral ( 它 的 值 是 2) 的 子 
市 点 。 


。 代码 生成 
将 AST 转换 为 可 执行 代码 的 过 程 称 被 称 为 代码 生成 。 这 个 过 程 与 语言 、 目 标 平 台 等 息 
息 相 关 。 
抛 开 具体 细节 ， 简 单 来 说 就 是 有 某 种 方法 可 以 将 var a = 2; 的 AST 转化 为 一 组 机 器 指 
令 ， 用 来 创建 一 个 叫 作 a 的 变量 (包括 分 配 内 存 等 )， 并 将 一 个 值 储 存在 a 中 。 














关于 引擎 如 何 管理 系统 资源 超出 了 我 们 的 讨论 范围 ， 因 此 只 需要 简单 地 了 解 
引擎 可 以 根据 需要 创建 并 储存 变量 即 可 。 

















比 起 那些 编译 过 程 只 有 三 个 步骤 的 语言 的 编译 器 ，JavaScript 引擎 要 复杂 得 多 。 例 如 ， 在 
语法 分 析 和 代码 生成 阶段 有 特定 的 步骤 来 对 运行 性 能 进行 优化 ， 包 括 对 元 余 元 素 进行 优化 


Ac 
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因此 在 这 里 只 进行 宏观 、 简 单 的 介绍 ， 接 下 来 你 就 会 发 现 我 们 介绍 的 这 些 看 起 来 有 点 高 深 
的 内 容 与 所 要 讨论 的 事情 有 什么 关联 。 

首先 ，JavaScript 引擎 不 会 有 大 量 的 〈 像 其 他 语言 编译 器 那么 多 的 ) 时 间 用 来 进行 优化 ， 
为 与 其 他 语言 不 同 ，JavaScript 的 编译 过 程 不 是 发 生 在 构建 之 前 的 。 

对 于 JavaScript 来 说 ， 大 部 分 情况 下 编译 发 生 在 代码 执行 前 的 几 微 秒 (甚至 更 短 ! ) 的 时 
间 内 。 在 我 们 所 要 讨论 的 作用 域 背后 ，JavaScript 引擎 用 尽 了 各 种 办 法 (比如 JIT， 可 以 延 
迟 编译 甚至 实施 重 编 译 ) 来 保证 性 能 最 佳 。 























>H 




















简单 地 说 ， 任 何 JavaScript 代码 片段 在 执行 前 都 要 进行 编译 (通常 就 在 执行 前 )。 因 此 ， 
JavaScript 编译 器 首先 会 对 var a = 2; 这 段 程序 进行 编译 ， 然 后 做 好 执行 它 的 准备 ， 并 且 
通常 马上 就 会 执行 它 。 


1.2 理解 作用 域 


我 们 学 习作 用 域 的 方式 是 将 这 个 过 程 模 拟 成 几 个 人 物 之 间 的 对 话 。 那 么 ， 由 谁 进 行 这 场 对 
话 呢 ? 











1.2.1 演员 表 
首先 介绍 将 要 参与 到 对 程序 var a = 2; 进行 处 理 的 过 程 中 的 演员 们 ， 这 样 才能 理解 接 下 来 
将 要 听 到 的 对 话 。 
«8| 

从 头 到 尾 负责 整个 JavaScript 程序 的 编译 及 执行 过 程 。 


























。 编译 器 
引擎 的 好 朋友 之 一 ， 人 负责 语法 分 析 及 代码 生成 等 脏 活 黑 活 ( 详 见 前 一 节 的 内 容 )。 
. RA 


引擎 的 另 一 位 好 朋友 ， 负 责 收集 并 维护 由 所 有 声明 的 标识 符 (变量 ) 组 成 的 一 系列 查 
询 ， 并 实施 一 套 非常 严格 的 规则 ， 确 定 当前 执行 的 代码 对 这 些 标识 符 的 访问 权限 。 


为 了 能 够 完全 理解 JavaScript 的 工作 原理 ， 你 需要 开始 像 引 擎 (和 它 的 朋友 们 ) 一 样 思考 ， 
从 它们 的 角度 提出 问题 ， 并 从 它们 的 角度 回答 这 些 问题 。 
































1.2.2. xà 
当 你 看 见 var a = 2: 这 段 程序 时 ， 很 可 能 认为 这 是 一 句 声明。 但 我 们 的 新 朋友 引擎 却 不 这 
么 看 。 事 实 上 ， 引 警 认为 这 里 有 两 个 完全 不 同 的 声明 ， 一 个 由 编译 器 在 编译 时 处 理 ， 另 一 
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个 则 由 引擎 在 运行 时 处 理 。 
下 面 我 们 将 var a = 2; 分 解 ， 看 看 引擎 和 它 的 朋友 们 是 如 何 协同 工作 的 。 





编译 器 首先 会 将 这 段 程序 分 解 成 词法 单元 ， 然 后 将 词法 单元 解析 成 一 个 树 结构 。 但 是 当 编 
译 器 开始 进行 代码 生成 时 ， 它 对 这 段 程序 的 处 理 方式 会 和 预期 的 有 所 不 同 。 





















































可 以 合理 地 假设 编译 器 所 产生 的 代码 能 够 用 下 面 的 伪 代 码 进 行 概括 :“ 为 一 个 变量 分 配 内 
存 ， 将 其 命名 为 a， 然 后 将 值 2 保存 进 这 个 变量 。 然而 ， 这 并 不 完全 正确 。 








事实 上 编译 器 会 进行 如 下 处 理 。 


1. 遇 到 var a， 编 译 器 会 询问 作用 域 是 否 已 经 有 一 个 该 名 称 的 变量 存在 于 同一 个 作用 域 的 
集合 中 。 如 果 是 ， 编 译 器 会 忽略 该 声明 ， 继 续 进 行 编译 ， 否 则 它 会 要 求 作用 域 在 当前 作 
用 域 的 集合 中 声明 一 个 新 的 变量 ， 并 命名 为 a。 


2. 接 下 来 编译 器 会 为 引擎 生成 运行 时 所 需 的 代码 ， 这 些 代 码 被 用 来 处 理 a = 2 这 个 赋值 
操作 。 引 擎 运行 时 会 首先 询问 作用 域 ， 在 当前 的 作用 域 集合 中 是 否 存在 一 个 叫 作 a 的 
变量 。 如 果 是 ， 引 擎 就 会 使 用 这 个 变量 ， 如 果 否 ， 引 擎 会 继续 查找 该 变量 (查看 1.3 


T) 


市 )。 



























































如 果 引 擎 最 终 找 到 了 a 变量 ， 就 会 将 2 赋值 给 它 。 否 则 引擎 就 会 举 手 示 意 并 抛 出 一 个 异 
常 ! 


总 结 : 变量 的 赋值 操作 会 执行 两 个 动作 ， 首 先 编译 器 会 在 当前 作用 域 中 声明 一 个 变量 (如 
果 之 前 没有 声明 过 )， 然 后 在 运行 时 引擎 会 在 作用 域 中 查找 该 变量 ， 如 果 能 够 找到 就 会 对 
EIE. 


1.2.3 编译 器 有 话说 


为 了 进一步 理解 ， 我 们 需要 多 介绍 一 点 编译 器 的 术语 。 





编译 器 在 编译 过 程 的 第 二 步 中 生成 了 代码 ， 引 擎 执行 它 时 ， 会 通过 查找 变量 a 来 判断 它 是 
否 已 声明 过 。 查 找 的 过 程 由 作用 域 进行 协助 ， 但 是 引擎 执行 怎样 的 查找 ， 会 影响 最 终 的 查 
找 结果 。 




















在 我 们 的 例子 中 ， 引 警 会 为 变量 a 进行 LHS 查询 。 另 外 一 个 查找 的 类 型 叫 作 RHS, 





我 打赌 你 一 定 能 猜 到 “L” 和 “R” 的 含义 ， 它 们 分 别 代表 左 侧 和 右 侧 。 
什么 东西 的 左 侧 和 右 侧 ?是 一 个 赋值 操作 的 左 侧 和 右 侧 。 
换 名 话说 ， 当 变量 出 现在 赋值 操作 的 左 侧 时 进行 LHS 查询 ， 出 现在 右 侧 时 进行 RHS 查询 。 
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讲 得 更 准确 一 点 ，RHS 查询 与 简单 地 查找 某 个 变量 的 值 别 无 二 致 ， 而 LHS 查询 则 是 试图 
找到 变量 的 容器 本 身 ， 从 而 可 以 对 其 赋值 。 从 这 个 角度 说 ，RHS 并 不 是 真正 意义 上 的 “ 赋 
值 操 作 的 右 侧 "”， 更 准确 地 说 是 “ 非 左 侧 ”。 


你 可 以 将 RHS 理解 成 retrieve his source value ( 取 到 它 的 源 值 )， 这 意味 着 “得 到 某 某 的 
值 ”。 


让 我 们 继续 深入 研究 。 


























考虑 以 下 代码 : 


console.log( a ); 





其 中 对 a 的 引用 是 一 个 RHS 引用 ， 因 为 这 里 a 并 没有 赋予 任何 值 。 相 应 地 ， 需 要 查找 并 取 
得 a 的 值 ， 这 样 才能 将 值 传 递 给 console.log(..), 


相 比 之 下 ， 例 如 : 
d 22; 


这 里 对 a 的 引用 则 是 LHS 引用 ， 因 为 实际 上 我 们 并 不 关心 当前 的 值 是 什么 ， 只 是 想 要 为 = 
2 这 个 赋值 操作 找到 一 个 目标 。 


LHS 和 RHS 的 含义 是 “赋值 操作 的 左 侧 或 右 侧 ”并 不 一 定 意味 着 就 是 “= 
赋值 操作 符 的 左 侧 或 右 侧 ”。 赋 值 操作 还 有 其 他 几 种 形式 ， 因 此 在 概念 上 最 
好 将 其 理解 为 “ gk HH Peto HL (LHS)” 以 及 “ 谁 是 赋值 操作 的 源头 
(RHS)", 












































考虑 下 面 的 程序 ， 其 中 既 有 LHS 也 有 RHS 引用 : 











function foo(a) { 
console.log( a ); // 2 
} 


foo( 2 ); 


最 后 一 行 foo(..) 函数 的 调用 需要 对 foo 进行 RHS 引用 ， 意 味 着 “去 找到 foo 的 值 ， 并 把 
EAR”. FE C.) 意味 着 foo 的 值 需要 被 执行 ， 因 此 它 最 好 真 的 是 一 个 函数 类 型 的 值 ! 
这 里 还 有 一 个 容易 被 忽略 却 非常 重要 的 细 市 。 

代码 中 隐 式 的 a=2 操 作 可 能 很 容易 被 你 忽略 掉 。 这 个 操作 发 生 在 2 被 当 作 参数 传递 给 


foo(..) 函数 时 ，2 会 被 分 配给 参数 a。 为 了 给 参数 a ( 隐 式 地 ) 分 配 值 ， 需 要 进行 一 次 
LHS 查询 。 
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这 里 还 有 对 a 进行 的 RHS 引用 ， 并 且 将 得 到 的 值 传 给 了 console.log(..), console. 
log(..) 本 身 也 需要 一 个 引用 才能 执行 ， 因 此 会 对 console 对 象 进行 RHS 查询 ， 并 且 检 查 
得 到 的 值 中 是 否 有 一 个 叫 作 log 的 方法 。 


最 后 ， 在 概念 上 可 以 理解 为 在 LHS 和 RHS 之 间 通 过 对 值 2 进行 交互 来 将 其 传递 进 log(..) 
(通过 变量 a 的 RHS 查询 )。 假 设 在 logt.) 国 数 的 原生 实现 中 它 可 以 接受 参数 ， 在 将 2 WR 
值 给 其 中 第 一 个 〈 也 许 叫 作 arg1) 参数 之 前 ， 这 个 参数 需要 进行 LHS 引用 查询 。 





你 可 能 会 倾向 于 将 函数 声明 function foo(a) (... 概念 化 为 普通 的 变量 声明 
和 赋值 ， 比 如 var foo, foo = function(a) {.……。 如 有 果 这 样 理解 的 话 ， 这 
个 函数 声明 将 需要 进行 LHS 查询 。 

然而 还 有 一 个 重要 的 细微 差别 ， 编 译 器 可 以 在 代码 生成 的 同时 处 理 声明 和 值 
的 定义 ， 比 如 在 引擎 执行 代码 时 ， 并 不 会 有 线程 专门 用 来 将 一 个 国 数值 “分 
配给 ”foo。 因 此 ， 将 函数 声明 理解 成 前 面 过 论 的 LHS 查询 和 赋值 的 形式 并 


不 合适 。 




















1.2.4 引擎 和 作用 域 的 对 话 


function foo(a) f 
console.log( a ); // 2 


j 


foo( 2); 
让 我 们 把 上 面 这 段 代 码 的 处 理 过 程 想 象 成 一 段 对 话 ， 这 段 对 话 可 能 是 下 面 这 样 的 。 


引擎 : 我 说 作用 域 ， 我 需要 为 foo 进行 RHS 引用 。 你 见 过 它 吗 ? 

ERR: 别 说 ， 我 还 真 见 过 ， 编 译 器 那 小 子 刚 刚 声明 了 它 。 它 是 一 个 函数 ， 给 你 。 
引擎 ， 哥们 太 够 意思 了 ! 好 吧 ， 我 来 执行 一 下 foo, 

引擎 : 作用 域 ， 还 有 个 事 儿 。 我 需要 为 a 进 行 LHS 引用 ， 这 个 你 见 过 吗 ? 

EAR: 这 个 也 见 过 ， 编 译 器 最 近 把 它 声 名 为 foo 的 一 个 形式 参数 了 ， 拿 去 吧 。 
引擎 : 大 恩 不 言 谢 ， 你 总 是 这 么 棒 。 现 在 我 要 把 2 赋值 给 as 

引擎 : 哥们 ， 不 好 意思 又 来 打扰 你 。 我 要 为 console 进行 RHS 引用 ， 你 见 过 它 吗 ? 
作用 域 : 咱 俩 谁 跟 谁 啊 ， 再 说 我 就 是 干 这 个 。 这 个 我 也 有 ，console 是 个 内 置 对 象 。 
给 你 。 

引擎 : 么 么 呈 。 我 得 看 看 这 里 面 是 不 是 有 log(..)。 太 好 了 ， 找 到 了 ， 是 一 个 函数 。 
引擎 : 哥们 ， 能 帮 我 再 找 一 下 对 a 的 RHS 引用 吗 ? 虽然 我 记得 它 ， 但 想 再 确认 一 次 。 
EAR: 放心 吧 ， 这 个 变量 没有 变动 过 ， 拿 走 ， 不 谢 。 

引擎 : 真 棒 。 我 来 把 a 的 值 ， 也 就 是 2， 传 递 进 1og(..)。 
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1.2.5 “小 测验 
检验 一 下 到 目前 的 理解 程度 。 把 自己 当 作 3 引擎， 并 同 作用 域 进行 一 次 “对 话 ”: 





function foo(a) { 
var b = a; 
return a + b; 
} 
var c = foo( 2); 
1. 找到 其 中 所 有 的 LHS 查询 。( 这 里 有 3 处 ! ) 
2. 找到 其 中 所 有 的 RHS 查询 。( 这 里 有 4 处 ! ) 


查看 本 章 小 结 中 的 参考 答 


1.3 FAHRE 


我 们 说 过 ， 作 用 域 是 根据 名 称 查 找 变 量 的 一 套 规则 。 实 际 情 况 中 ， 通 常 需要 同时 顾及 几 个 
作用 域 。 

当 一 个 块 或 函数 租 套 在 另 一 个 块 或 函数 中 时 ， 就 发 生 了 作用 域 的 租 套 。 因 此 ， 在 当前 作用 
域 中 无 法 找到 某 个 变量 时 ， 引 警 就 会 在 外 层 艇 套 的 作用 域 中 继续 查找 ， 直 到 找到 该 变量 ， 
或 抵达 最 外 层 的 作用 域 (也 就 是 全 局 作用 域 ) 为 止 。 


考虑 以 下 代码 : 











function foo(a) { 
console.log( a + b ); 
} 
var b = 2; 
foo( 2 ); // 4 
对 b 进行 的 RHS 引用 无 法 在 函数 foo 内 部 完成 ， 但 可 以 在 上 一 级 作用 域 (在 这 个 例子 中 就 
是 全 局 作用 域 ) 中 完成 。 


因此 ， 回 顾 一 下 引擎 和 作用 域 之 间 的 对 话 ， 会 进一步 听 到 : 





引擎 : foo 的 作用 域 兄 弟 ， 你 见 过 b 吗 ? 我 需要 对 它 进 行 RHS 引用 。 
作用 域 : 听 都 没 听 过 ， 走 开 。 
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引擎 : foo 4j LZLAEJH JLOULS, vA? 有 了 眼 不 识 泰山 ， 原 来 你 是 全 局 作用 域 大 哥 ， 
太 好 了 。 你 见 过 b 吗 ? 我 需要 对 它 进 行 RHS 引用 。 
作用 域 : 当然 了 ， 给 你 吧 。 


遍历 向 套 作用 域 链 的 规则 很 简单 :引擎 从 当前 的 执行 作用 域 开始 查找 变量 ， 如 有 果 找 不 到 ， 
就 向 上 一 级 继续 查找 。 当 抵达 最 外 层 的 全 局 作用 域 时 ， 无 论 找 到 还 是 没 找到 ， 查 找 过 程 都 


会 停止 。 


把 作用 域 链 比喻 成 一 个 建筑 
为 了 将 作用 域 处 理 的 过 程 可 视 化 ， 我 希望 你 在 脑 中 想象 下 面 这 个 高 大 的 建筑 ， 


























全 局 作用 域 


E Eee M 


E m] us (n nd 
E d (n nd 


词法 作用 域 
--------------------------> 


E (m) me (mn nd 
LEAN NE. 
E ud (un) nd 


当前 作用 域 




















这 个 建筑 代表 程序 中 的 舱 套 作用 域 链 。 第 一 层 楼 代表 当前 的 执行 作用 域 ， 也 就 是 你 所 处 的 
位 置 。 建 筑 的 顶层 代表 全 局 作用 域 。 











LHS 和 RHS 引用 都 会 在 当前 楼 层 进 行 查找 ， 如 果 没 有 找到 ， 就 会 坐 电梯 前 往 上 一 层 楼 ， 
如 果 还 是 没有 找到 就 继续 向 上 ， 以 此 类 推 。 一 旦 抵达 顶层 (全 局 作用 域 )， 可 能 找到 了 你 
所 需 的 变量 ， 也 可 能 没 找到 ， 但 无 论 如 何 查 找 过 程 都 将 停止 。 
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14 异常 
为 什么 区 分 LHS 和 RHS 是 一 件 重要 的 事情 ? 


因为 在 变量 还 没有 声明 (在 任何 作用 域 中 都 无 法 找到 该 变量 ) 的 情况 下 ， 这 两 种 查询 的 行 
为 是 不 一 样 的 。 





考虑 如 下 代码 : 


function foo(a) { 
console.log( a + b ); 
b-a; 


} 

foo( 2 ); 
第 一 次 对 b 进行 RHS 查询 时 是 无 法 找到 该 变量 的 。 也 就 是 说 ， 这 是 一 个 “未 声明 ”的 变 
量 ， 因 为 在 任何 相关 的 作用 域 中 都 无 法 找到 它 。 
如 果 RHS 查询 在 所 有 骸 套 的 作用 域 中 遍 寻 不 到 所 需 的 变量 ， 引 擎 就 会 抛 出 ReferenceError 
异常 。 值 得 注意 的 是 ，ReferenceError 是 非常 重要 的 异常 类 型 。 
相 较 之 下 ， 当 引擎 执行 LHS 查询 时 ， 如 果 在 顶层 (全 局 作用 域 ) 中 也 无 法 找到 目标 变量 ， 
全 局 作用 域 中 就 会 创建 一 个 具有 该 名 称 的 变量 ， 并 将 其 返还 给 引擎 ， 前 提 是 程序 运行 在 非 
“严格 模式 ”下 。 

















“不 ， 这 个 变量 之 前 并 不 存在 ， 但 是 我 很 热心 地 帮 你 创建 了 一 个 。 





ES5 中 引入 了 “严格 模式 ”。 同 正常 模式 ， 或 者 说 宽松 / 懒惰 模式 相 比 ， 严 格 模式 在 行为 上 
有 很 多 不 同 。 其 中 一 个 不 同 的 行为 是 严格 模式 禁止 自动 或 隐 式 地 创建 全 局 变量 。 因 此 ,在 
严格 模式 中 LHS 查询 失败 时 ， 并 不 会 创建 并 返回 一 个 全 局 变量 ， 引 擎 会 抛 出 同 RHS 查询 
失败 时 类 似 的 ReferenceError 异常 。 
































接 下 来 ， 如 果 RHS 查询 找到 了 一 个 变量 ， 但 是 你 尝试 对 这 个 变量 的 值 进行 不 合理 的 操作 ， 
比如 试图 对 一 个 非 函 数 类 型 的 值 进行 函数 调用 ， 或 着 引用 null 或 undefined 类 型 的 值 中 的 
属性 ， 那 么 引擎 会 抛 出 另外 一 种 类 型 的 异常 ， 叫 作 TypeError。 


ReferenceError 同 作 用 域 判别 失败 相关 ， 而 TypeError 则 代表 作用 域 判 别 成 功 了 ， 但 是 对 
结果 的 操作 是 非法 或 不 合理 的 。 
1.5 ”小结 


作用 域 是 一 套 规则 ， 用 于 确定 在 何 处 以 及 如 何 查找 变量 〈 标 识 符 )。 如 果 查 找 的 目的 是 对 
变量 进行 赋值 ， 那 么 就 会 使 用 LHS 查询 ， 如 有 果 目 的 是 获取 变量 的 值 ， 就 会 使 用 RHS 查询 。 
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赋值 操作 符 会 导致 LHS 查询 。= 操 作 符 或 调用 函数 时 传 入 参数 的 操作 都 会 导致 关联 作用 域 
的 赋值 操作 。 

JavaScript 引擎 首先 会 在 代码 执行 前 对 其 进行 编译 ， 在 这 个 过 程 中 , 像 var a = 2 这样 的 声 
明 会 被 分 解 成 两 个 独立 的 步骤 : 

1. 首先 ，var a 在 其 作用 域 中 声明 新 变量 。 这 会 在 最 开始 的 阶段 ， 也 就 是 代码 执行 前 进 

2. 接 下 来 ，a = 2 会 查询 (LHS 查询 ) 变量 a 并 对 其 进行 赋值 。 


















































LHS 和 RHS 查询 都 会 在 当前 执行 作用 域 中 开始 ， 如 果 有 需要 (也 就 是 说 它们 没有 找到 所 
需 的 标识 符 ) ， 就 会 向 上 级 作用 域 继 弓 区 查找 目标 标识 符 ， 这 样 每 次 上 升 一 级 作用 域 (一 层 
楼 )， 最 后 抵达 全 局 作用 域 (顶层 )， 无 论 找 到 或 没 找到 都 将 停止 。 


不 成 功 的 RHS 引用 会 导致 搜 出 ReferenceError 异常 。 不 成 功 的 LHS 引用 会 导致 自动 隐 式 
地 创建 一 个 全 局 变量 ( 非 严 格 模 式 下 )， 该 变量 使 用 LHS 引用 的 目标 作为 标识 符 ， 或 者 抛 
出 ReferenceError 异常 (严格 模式 下 )。 


小 测验 答案 


function foo(a) f 
var b = a; 
return a + b; 











} 


var c = foo( 2 ); 


1. 找 出 所 有 的 LHS 查询 bo Ed ) 
c= ..;、a = 2 ( 隐 式 变量 分 配 )、 


2. 找 出 所 有 的 RHS 查询 (这 里 有 4 处 ! ) 
foo(2... = aj, a .., .. b 
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词法 作用 域 














在 第 1 章 中 ,我们 将 “作用 域 ” 定 义 为 一 套 规则 ， 这 套 规则 用 来 管理 引擎 如 何在 当前 作用 
域 以 及 艇 套 的 子 作 用 域 中 根据 标识 符 名 称 进 行 变 量 查找 。 


作用 域 共有 两 种 主要 的 工作 模型 。 第 一 种 是 最 为 普遍 的 ， 被 大 多 数 编程 语言 所 采用 的 词法 
作用 域 ， 我 们 会 对 这 种 作用 域 进行 深入 讨论 。 另 外 一 种 叫 作 动态 作用 域 ， 仍 有 一 些 编程 语 
言 在 使 用 (比如 Bash 脚本 、Perl 中 的 一 些 模式 等 )。 

















附录 A 中 介绍 了 动态 作用 域 ， 在 这 里 提 到 它 只 是 为 了 同 JavaScript 所 采用 的 作用 域 模型 ， 
即 词法 作用 域 模型 进行 对 比 。 


+ 一 $ 几 
2.1 词法 阶段 
第 1 章 介绍 过 ， 大 部 分 标准 语言 编译 器 的 第 一 个 工作 阶段 叫 作 词法 化 〈 也 叫 单词 化 )。 回 
忆 一 下 ， 词 法 化 的 过 程 会 对 源 代 码 中 的 字符 进行 检查 ， 如 果 是 有 状态 的 解析 过 程 ， 还 会 赋 
予 单词 语义 。 
这 个 概念 是 理解 词法 作用 域 及 其 名 称 来 历 的 基础 。 























简单 地 说 ， 词 法 作用 域 就 是 定义 在 词法 阶段 的 作用 域 。 换 名 话说， 词法 作用 域 是 由 你 在 写 
代码 时 将 变量 和 块 作用 域 写 在 哪里 来 决定 的 ， 因 此 当 词法 分 析 器 处 理 代码 时 会 保持 作用 域 
不 变 (大 部 分 情况 下 是 这 样 的 )。 











后 面 会 介绍 一 些 欺 骗 词法 作用 域 的 方法 ， 这 些 方 法 在 词法 分 析 器 处 理 过 后 依 
然 可 以 修改 作用 域 ， 但 是 这 种 机 制 可 能 有 点 难以 理解 。 事 实 上 ， 让 词法 作用 
域 根据 词法 关系 保持 书写 时 的 自然 关系 不 变 ， 是 一 个 非常 好 的 最 佳 实践 。 











考虑 以 下 代码 : 


function foo(a) { 
var b=a*2; 


function bar(c) { 
console.log( a, b, c ); 


} 


bar( b * 3 ); 
} 


foo( 2); // 2, 4, 12 


在 这 个 例子 中 有 三 个 逐 级 艇 套 的 作用 域 。 为 了 帮助 理解 ， 可 以 将 它们 想象 成 儿 个 逐 级 包含 
的 气泡 。 








function foo(a) { Q 
varb-a*2; o 
function bar(c) ( o 


console.log( a, b, c ); 


} 
bar(b * 3); 


der 2 8 // 25 A 














@ 包含 着 整个 全 局 作用 域 ， 其 中 只 有 一 个 标识 符 : foo。 
O 包含 着 foo 所 创建 的 作用 域 ， 其 中 有 三 个 标识 符 : a. bar 和 b。 





6e 包含 着 bar 所 创建 的 作用 域 ， 其 中 只 有 一 个 标识 符 : c. 


作用 域 气泡 由 其 对 应 的 作用 域 块 代码 写 在 哪里 决定 ， 它 们 是 逐 级 包含 的 。 下 一 章 会 讨论 不 
同类 型 的 作用 域 ， 但 现在 只 要 假设 每 一 个 国 数 都 会 创建 一 个 新 的 作用 域 气泡 就 好 了 。 


























bar 的 气泡 被 完全 包含 在 foo 所 创建 的 气泡 中 ， 唯 一 的 原因 是 那里 就 是 我 们 希望 定义 函数 
bar 的 位 置 。 
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注意 ， 这 里 所 说 的 气泡 是 严格 包含 的 。 我 们 并 不 是 在 讨论 文 氏 图 ' 这 种 可 以 跨越 边界 的 气 
泡 。 换 句 话说， 没有 任何 函数 的 气泡 可 以 (部 分 地 ) pe Ee 
中 ， 就 如 同 没 有 任何 函数 可 以 部 分 地 同时 出 现在 两 个 父 级 函数 中 一 样 。 


查找 
作用 域 气泡 的 结构 和 互相 之 间 的 位 置 关系 给 引擎 提供 了 足够 的 位 置信 息 ， 引 擎 用 这 些 信息 
来 查找 标识 符 的 位 置 。 


在 上 一 个 代码 片段 中 ， 引 擎 执行 console.log(..) 声明 ， 并 查找 a、b 和 < 三 个 变量 的 引 
用 。 它 首先 从 最 内 部 的 作用 域 ， 也 就 是 barC..) 函数 的 作用 域 气 泡 开 始 查找 。 引 擎 无 法 在 
这 里 找到 a， 因 此 会 去 上 一 级 到 所 租 套 的 foo(..) 的 作用 域 中 继续 查找 。 在 这 里 找到 了 a, 
因此 引擎 使 用 了 这 个 引用 。 对 b 来 讲 也 是 一 样 的 。 而 对 < 来 说 ， 引 警 在 bar(..) 中 就 找到 
ds 











如 果 a、c 都 存在 于 bar(..) 和 foo(..) 的 内 部 ，console.log(..) 就 可 以 直接 使 用 bar(..) 
中 的 变量 ， 而 无 需 到 外 面 的 foo(..) 中 查找 。 








作用 域 查找 会 在 找到 第 一 个 匹配 的 标识 符 时 停止 。 在 多 层 的 舱 套 作用 域 中 可 以 定义 同名 的 
标识 符 ， 这 叫 作 “和 遮 项 效应 ”( 内 部 的 标识 符 “ 遮 项 ”了 外 部 的 标识 符 )。 抛 开 遮 项 效应 ， 
作用 域 查找 始终 从 运行 时 所 处 的 最 内 部 作用 域 开 始 ， 逐 级 向 外 或 者 说 向 上 进行 ， 直 到 遇见 
第 一 个 匹配 的 标识 符 为 止 。 





全 局 变量 会 自动 成 为 全 局 对 象 比如 浏览 器 中 的 window 对 象 ) 的 属性 ， 
可 以 不 直接 通过 全 局 对 象 的 词法 名 称 ， 而 是 间接 地 通过 对 全 局 对 象 属性 的 引 
用 来 对 其 进行 访问 。 


S 
a 



































window.a 
通过 这 种 技术 可 以 访问 那些 被 同名 变量 所 遮蔽 的 全 局 变量 。 但 非 全 局 的 变量 
如 有 果 被 遮蔽 了 ， 无 论 如何 都 无 法 被 访问 到 。 


无 论 函 数 在 哪里 被 调用 ， 也 无 论 它 如 何 被 调用 ， 它 的 词法 作用 域 都 只 由 函数 被 声明 时 所 处 
的 位 置 决 定 。 





词法 作用 域 查 找 只 会 查找 一 级 标识 符 ， 比 如 a、b 和 <c。 如 果 代 码 中 引用 了 foo.bar.baz, 
词法 作用 域 查找 只 会 试图 查找 foo 标识 符 ， 找 到 这 个 变量 后 ， 对 象 属性 访问 规则 会 分 别 接 
管 对 bar 和 baz 属性 的 访问 。 




















注 1: 集合 论 中 用 以 表示 集合 (或 类 ) 的 一 种 草图 。http://zh.wikipedia.org/wiki/9%E6%96%87%E6%B0%8F% 
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2.2 欺骗 词法 

如 果 词 法 作用 域 完 全 由 写 代 码 期 间 国 数 所 声明 的 位 置 来 定义 ， 怎 样 才能 在 运行 时 来 “ 修 
改 ”( 也 可 以 说 欺骗) 词法 作用 域 呢 ? 

JavaScript 中 有 两 种 机 制 来 实现 这 个 目的 。 社 区 普遍 认为 在 代码 中 使 用 这 两 种 机 制 并 不 是 
什么 好 注意 。 但 是 关于 它们 的 争论 通常 会 忽略 掉 最 重要 的 点 : 欺骗 词法 作用 域 会 导致 性 能 
下 降 。 


在 详细 解释 性 能 问题 之 前 ， 先 来 看 看 这 两 种 机 制 分 别 是 什么 原理 。 

















Td 





2.2.1 eval 

JavaScript 中 的 evalC..) 国 数 可 以 接受 一 个 字符 串 为 参数 ， 并 将 其 中 的 内 容 视 为 好 像 在 书 
写 时 就 存在 于 程序 中 这 个 位 置 的 代码 。 换 句 话说， 可 以 在 你 写 的 代码 中 用 程序 生成 代码 并 
运行 ， 就 好 像 代 码 是 写 在 那个 位 置 的 一 样 。 








根据 这 个 原理 来 理解 evaL(.:)， 它 是 如 何 通过 代码 欺骗 和 假装 成 书写 时 (也 就 是 词法 期 ) 
代码 就 在 那 ， 来 实现 修改 词法 作用 域 环境 的 ， 这 个 原理 就 变 得 清晰 易 懂 了 。 








在 执行 evalC..) 之 后 的 代码 时 ， 引 擎 并 不 “知道 ”或 “在 意 ” 前 面 的 代码 是 以 动态 形式 插 
入 进来 ， 并 对 词法 作用 域 的 环境 进行 修改 的 。 引 擎 只 会 如 往常 地 进行 词法 作用 域 查 找 。 


考虑 以 下 代码 : 





function foo(str, a) { 
eval( str ); // Hh! 
console.log( a, b ); 


J 

var b - 2; 

foo( "var bs 35", 1); // 1, 3 
eval(..) 调用 中 的 "var b = 3;" 这 段 代 码 会 被 当 作 本 来 就 在 那里 一 样 来 处 理 。 由 于 那 段 代 
码 声 明了 一 个 新 的 变量 b， 因 此 它 对 已 经 存在 的 fool.) 的 词法 作用 域 进行 了 修改 。 事 实 
上 ， 和 前 面 提 到 的 原理 一 样 ， 这 段 代 码 实际 上 在 foo(..) 内 部 创建 了 一 个 变量 bp， 并 遮蔽 
了 外 部 (全 局 ) 作用 域 中 的 同名 变量 。 

















当 console.log(..) 被 执行 时 ， 会 在 fooC..) 的 内 部 同时 找到 a 和 b， 但 是 永远 也 无 法 找到 
外 部 的 b。 因 此 会 输出 “1 3” 而 不 是 正常 情况 下 会 输出 的 “1, 2 。 
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在 这 个 例子 中 ， 为 了 展示 的 方便 和 简洁 ， 我 们 传递 进去 的 “代码 ”字符 串 是 
固定 不 变 的 。 而 在 实际 情况 中 ， 可 以 非常 容易 地 根据 程序 逻辑 动态 地 将 字符 
拼接 在 一 起 之 后 再 传递 进去 。eval(..) 通常 被 用 来 执行 动态 创建 的 代码 ， 因 
为 像 例子 中 这 样 动态 地 执行 一 段 固定 字符 所 组 成 的 代码 ， 并 设 有 比 直接 将 代 
码 写 在 那里 更 有 好 处 。 





























默认 情况 下 ， 如 果 evat(..) 中 所 执行 的 代码 包含 有 一 个 或 多 个 声明 (无 论 是 变量 还 是 函 
数 )， 就 会 对 eval(..) 所 处 的 词法 作用 域 进行 修改 。 技 术 上 ， 通 过 一 些 技巧 (已 经 超出 我 
们 的 讨论 范围 ) 可 以 间接 调用 eval(..) 来 使 其 运行 在 全 局 作用 域 中 ， 并 对 全 局 作用 域 进行 
修改 。 但 无 论 何 种 情况 ，eval(.…) 都 可 以 在 运行 期 修改 书写 期 的 词法 作用 域 。 








在 严格 模式 的 程序 中 ，eval(..) 在 运行 时 有 其 自己 的 词法 作用 域 ， 意 味 着 其 
中 的 声明 无 法 修改 所 在 的 作用 域 。 








function foo(str) { 
"use strict"; 
eval( str ); 
console.log( a ); // ReferenceError: a is not defined 


} 


foo( "var a = 2" ); 


JavaScript 中 还 有 其 他 一 些 功 能 效果 和 eval(..) 很 相似 。setTimeout(..) 和 
setInterval(..) 的 第 一 个 参数 可 以 是 字符 串 ， 字 符 串 的 内 容 可 以 被 解释 为 一 段 动 态 生 成 的 
函数 代码 。 这 些 功 能 已 经 过 时 且 并 不 被 提倡 。 不 要 使 用 它们 | 





new Function(..) 国 数 的 行为 也 很 类 似 ， 最 后 一 个 参数 可 以 接受 代码 字符 串 ， 并 将 其 转 
化 为 动态 生成 的 函数 (前 面 的 参数 是 这 个 新 生成 的 函数 的 形 参 )。 这 种 构建 函数 的 语法 比 
eval(..) 略微 安全 一 些 ， 但 也 要 尽量 避免 使 用 。 


在 程序 中 动态 生成 代码 的 使 用 场景 非常 罕见 ， 因 为 它 所 带 来 的 好 处 无 法 抵消 性 能 上 的 损 
Ke 


2.2.2 with 
JavaScript 中 另 一 个 难以 掌握 (并且 现在 也 不 推荐 使 用 ) 的 用 来 欺骗 词法 作用 域 的 功能 是 
with 关键 字 。 可 以 有 很 多 方法 来 解释 with， 在 这 里 我 选择 从 这 个 角度 来 解释 它 : 它 如 何 同 
被 它 所 影响 的 词法 作用 域 进行 交互 。 














with 通常 被 当 作 重复 引用 同一 个 对 象 中 的 多 个 属性 的 快捷 方式 ， 可 以 不 需要 重复 引用 对 象 
本 身 。 








比如 : 


var obj = ( 











a: 1, 
bs. 2; 
c: 3 
Di 
// 单调 乏味 的 重复 "obj" 
obj.a = 2; 
obj.b = 3; 
obj.c = 4; 
// 简单 的 快捷 方式 
with (obj) { 
a= 3; 
bs 
c= 5; 
J 


但 实际 上 这 不 仅仅 是 为 了 方便 地 访问 对 象 属性 


function foo(obj) f 
with (obj) { 
az2; 


var 02 = ( 
b: 3 
J 


foo( o1 
console 


); 
.log( o1.a ); // 2 


foo( 02 
console 
console 


的 


.log( a ); // 2 





.log( 02.a ); // undefined 
不 好 ，a 被 六 





。 考 虑 如 下 代码 : 


攻 漏 到 全 局 作用 域 上 了 ! 


这 个 例子 中 创建 了 o1 和 02 两 个 对 象 。 其 中 一 个 具有 a 属性 ， 男 外 一 个 没有 。foo(..) K 
数 接受 一 个 obj 参数 ， 该 参数 是 一 个 对 象 引 用 ， 并 对 这 个 对 象 引用 执行 了 with(obj) {..}。 


在 with 块 内 部 ， 我 们 写 的 代码 看 起 来 











只 是 对 变量 a 进 


LHS 引用 (查看 第 1 章 )， 并 将 2 赋值 给 它 。 





4 A 


ITE] 





单 的 词法 引用 ， 实 际 上 就 是 一 个 





当 我 们 将 01 传递 进去 ，a= 2 赋值 操作 找到 了 01.a 并 将 2 赋值 给 它 ， 这 在 后 面 的 console. 





log(oi.a) 中 可 以 体现 。 而 当 02 传递 进去 ，02 并 没有 a 属性 ， 因 此 不 会 创建 这 个 属性 ， 


02.a 保持 undefined, 
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但 是 可 以 注意 到 一 个 奇怪 的 副作用 ， 实 际 上 a = 2 赋值 操作 创建 了 一 个 全 局 的 变量 a。 这 
是 怎么 回 事 ? 





with 可 以 将 一 个 没有 或 有 多 个 属性 的 对 象 处 理 为 一 个 完全 隔离 的 词法 作用 域 ， 因 此 这 个 对 
象 的 属性 也 会 被 处 理 为 定义 在 这 个 作用 域 中 的 词法 标识 符 。 








尽管 with 块 可 以 将 一 个 对 象 处 理 为 词法 作用 域 ， 但 是 这 个 块 内 部 正常 的 var 
声明 并 不 会 被 限制 在 这 个 块 的 作用 域 中 ， 而 是 被 添加 到 with 所 处 的 函数 作 
用 域 中 。 





eval(..) 函数 如 有 果 接 受 了 含有 一 个 或 多 个 声明 的 代码 ， 就 会 修改 其 所 处 的 词法 作用 域 ， 而 
with 声明 实际 上 是 根据 你 传递 给 它 的 对 象 赁 空 创 建 了 一 个 全 新 的 词法 作用 域 。 





可 以 这 样 理解 ， 当 我 们 传递 01 给 with 时 ，with 所 声明 的 作用 域 是 o1， 而 这 个 作用 域 中 含 
有 一 个 同 o1.a 属性 相符 的 标识 符 。 但 当 我 们 将 02 作为 作用 域 时 ， 其 中 并 设 有 a 标识 符 ， 
因此 进行 了 正常 的 LHS 标识 符 查 找 (查看 第 1 章 )。 


o2 的 作用 域 、foo(.…) 的 作用 域 和 全 局 作用 域 中 都 没有 找到 标识 符 a， 因 此 当 a= 2 执行 
时 ， 自 动 创建 了 一 个 全 局 变量 〈 因 为 是 非 严 格 模式 )。 

with 这 种 将 对 象 及 其 属性 放 进 一 个 作用 域 并 同时 分 配 标识 符 的 行为 很 让 人 费解 。 但 为 了 说 
明 我 们 所 看 到 的 现象 ， 这 是 我 能 给 出 的 最 直 白 的 解释 了 。 




















另外 一 个 不 推荐 使 用 eval(..) 和 with 的 原因 是 会 被 严格 模式 所 影响 〈 限 
制 )。with 被 完全 禁止 ， 而 在 保留 核心 功能 的 前 提 下 ， 间 接 或 非 安全 地 使 用 
eval(..) 也 被 禁止 了 。 














2.2.3 性 能 

eval(..) 和 with 会 在 运行 时 修改 或 创建 新 的 作用 域 ， 以 此 来 欺骗 其 他 在 书写 时 定义 的 词 
法 作用 域 。 

你 可 能 会 辣 ， 那 又 怎样 呢 ? 如 果 它 们 能 实现 更 复杂 的 功能 ， 并 且 代 码 更 具有 扩展 性 ， 难 道 
不 是 非常 好 的 功能 吗 ? 答案 是 否定 的 。 

JavaScript 引擎 会 在 编译 阶段 进行 数 项 的 性 能 优化 。 其 中 有 些 优化 依赖 于 能 够 根据 代码 的 
词法 进行 静态 分 析 ， 并 预先 确定 所 有 变量 和 函数 的 定义 位 置 ， 才 能 在 执行 过 程 中 快速 找到 
标识 符 。 












































但 如 果 引 擎 在 代码 中 发 现 了 eval(..) 或 Mth， 它 只 能 简单 地 假设 关于 标识 符 位 置 的 判断 
都 是 无 效 的 ， 因 为 无 法 在 词法 分 析 阶 段 明 确 知道 eval...) 会 接收 到 什么 代码 ， 这 些 代码 会 
如 何 对 作用 域 进 行 修改 ， 也 无 法 知道 传递 给 with 用 来 创建 新 词法 作用 域 的 对 象 的 内 容 到 底 


是 什么 。 
































最 悲观 的 情况 是 如 果 出 现 了 eval(..) 或 with， 所 有 的 优化 可 能 都 是 无 意义 的 ， 因 此 最 简 
单 的 做 法 就 是 完全 不 做 任何 优化 。 


如 果 代 码 中 大 量 使 用 eval(..) 或 with， 那么 运行 起 来 一 定 会 变 得 非常 慢 。 无 论 引 擎 多 聪 
明 ， 试 图 将 这 些 翡 观 情况 的 副作用 限制 在 最 小 范围 内 ， 也 无 法 避免 如 果 没 有 这 些 优化 ， 代 
码 会 运行 得 更 慢 这 个 事实 。 




















2.3 小结 


词法 作用 域 意味 着 作用 域 是 由 书写 代码 时 函数 声明 的 位 置 来 决定 的 。 编 译 的 词法 分 析 阶 段 
基本 能 够 知道 全 部 标识 符 在 哪里 以 及 是 如 何 声明 的 ， 从 而 能 够 预测 在 执行 过 程 中 如 何 对 它 
们 进行 查找 。 











JavaScript 中 有 两 个 机 制 可 以 “欺骗 ”词法 作用 域 evalC..) 和 with。 前 者 可 以 对 一 段 包 
含 一 个 或 多 个 声明 的 “代码 ”字符 串 进行 演算 ， 并 借 此 来 修改 已 经 存在 的 词法 作用 域 (在 
运行 时 )。 后 者 本 质 上 是 通过 将 一 个 对 象 的 引用 当 作 作用 域 来 处 理 ， 将 对 象 的 属性 当 作 作 
用 域 中 的 标识 符 来 处 理 ， 从 而 创建 了 一 个 新 的 词法 作用 域 (同样 是 在 运行 时 )。 


























这 两 个 机 制 的 副作用 是 引擎 无 法 在 编译 时 对 作用 域 查 找 进行 优化 ， 因 为 引擎 只 能 谨慎 地 认 
为 这 样 的 优化 是 无 效 的 。 使 用 这 其 中 任何 一 个 机 制 都 将 导致 代码 运行 变 慢 。 不 要 使 用 它们 。 
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第 3 章 


函数 作用 域 和 块 作用 域 








正如 我 们 在 第 2 章 中 讨论 的 那样 ， 作 用 域 包 含 了 一 系列 的 “ 气 移 ， 每 一 个 都 可 以 作为 容 
， 其 中 包含 了 标识 符 (变量 、 函 数 ) 的 定义 。 这 些 气泡 互相 般 套 并 且 整 齐 地 排列 成 蜂窝 
4， 排 列 的 结构 是 在 写 代码 时 定义 的 。 





n 

















e: 





但 是 ， 究 竟 是 什么 生成 了 一 个 新 的 气泡 ? 只 有 国 数 会 生成 新 的 气泡 吗 ? JavaScript 中 的 其 
他 结构 能 生成 作用 域 气泡 吗 ? 


3.1 函数 中 的 作用 域 


对 于 前 面 提出 的 问题 ， 最 常见 的 答案 是 JavaScript 具有 基于 函数 的 作用 域 ， 意味 着 每 声明 
一 个 函数 都 会 为 其 自身 创建 一 个 气泡 ， 而 其 他 结构 都 不 会 创建 作用 域 气 泡 。 但 事实 上 这 并 
不 完全 正确 ， 下 面 我 们 来 看 一 下 。 

















首先 需要 研究 一 下 函数 作用 域 及 其 背后 的 一 些 内 容 。 
考虑 下 面 的 代码 : 


function foo(a) { 
var b - 2; 


// 一 些 代码 
function bar() { 


I ak 
} 
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// 更 多 的 代码 


var C= 3; 

J 
在 这 个 代码 片段 中 ，foo(..) 的 作用 域 气泡 中 包含 了 标识 符 a、b、c 和 bar。 无 论 标识 符 
声明 出 现在 作用 域 中 的 何 处 ， 这 个 标识 符 所 代表 的 变量 或 函数 都 将 附属 于 所 处 作用 域 的 气 
泡 。 我 们 将 在 下 一 章 讨论 具体 的 原理 。 


bar(..) 拥有 自己 的 作用 域 气泡 。 全 局 作用 域 也 有 自己 的 作用 域 气泡 ， 它 只 包含 了 一 个 标 
识 符 : foo。 



































由 于 标识 符 a、b、c 和 bar 都 附属 于 fooC..) 的 作用 域 气 泡 ， 因 此 无 法 从 fooC. .) 的 外 部 
对 它们 进行 访问 。 也 就 是 说 ， 这 些 标 识 符 全 都 无 法 从 全 局 作用 域 中 进行 访问 ， 因 此 下 面 的 
代码 会 导致 ReferenceError 错误 : 


























bar(); // 失败 

console.log( a, b, c ); // 三 个 全 都 失败 
但 是 ， 这 些 标识 符 (a、b、c、foo 和 bar) 在 foo(..) 的 内 部 都 是 可 以 被 访问 的 ， 同 样 在 
bar(..) 内 部 也 可 以 被 访问 (假设 bar(..) 内 部 没有 同名 的 标识 符 声 明 )。 


半数 作用 域 的 含义 是 指 ， 属 于 这 个 函数 的 全 部 变量 都 可 以 在 整个 函数 的 范围 内 使 用 及 复 
用 《事实 上 在 符 套 的 作用 域 中 也 可 以 使 用 )。 这 种 设计 方案 是 非常 有 用 的 ， 能 充分 利用 
JavaScript 变量 可 以 根据 需要 改变 值 类 型 的 “动态 ”特性 。 























证 


但 与 此 同时 ， 如 果 不 细 心 处 理 那些 可 以 在 整个 作用 域 范围 内 被 访问 的 变量 ， 可 能 会 带 来 
想不到 的 问题 。 


3.2 ”隐藏 内 部 实现 


对 函数 的 传统 认 知 就 是 先 声明 一 个 函数 ， 然 后 再 向 里 面 添加 代码 。 但 反 过 来 想 也 可 以 带 来 
一 些 启示 : 从 所 写 的 代码 中 挑选 出 一 个 任意 的 片段 ， 然 后 用 函数 声明 对 它 进行 包装 ， 实 际 
上 就 是 把 这 些 代码 “隐藏 ”起 来 了 。 
































实际 的 结果 就 是 在 这 个 代码 片段 的 周围 创建 了 一 个 作用 域 气泡 ， 也 就 是 说 这 段 代 码 中 的 任 
何 声明 (变量 或 函数 ) 都 将 绑 定 在 这 个 新 创建 的 包装 函数 的 作用 域 中 ， 而 不 是 先前 所 在 的 
作用 域 中 。 换 句 话说 ， 可 以 把 变量 和 函数 包 夺 在 一 个 函数 的 作用 域 中 ， 然 后 用 这 个 作用 域 
来 “隐藏 ”它们 。 


为 什么 “隐藏 ”变量 和 函数 是 一 个 有 用 的 技术 ? 
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有 很 多 原因 促成 了 这 种 基于 作用 域 的 隐藏 方法 。 它 们 大 都 是 从 最 小 特权 原则 中 引申 出 来 
的 ， 也 叫 最 小 授权 或 最 小 暴露 原则 。 这 个 原则 是 指 在 软件 设计 中 ， 应 该 最 小 限度 地 暴露 必 
要 内 容 ， 而 将 其 他 内 容 都 “隐藏 ”起 来 ， 比 如 某 个 模块 或 对 象 的 API 设计 。 


这 个 原则 可 以 延伸 到 如 何 选 择 作用 域 来 包含 变量 和 函数 。 如 果 所 有 变量 和 函数 都 在 全 局 作 
用 域 中 ， 当 然 可 以 在 所 有 的 内 部 风 套 作用 域 中 访问 到 它们 。 但 这 样 会 破坏 前 面 提 到 的 最 小 
特权 原则 ， 因 为 可 能 会 暴 漏 过 多 的 变量 或 函数 ， 而 这 些 变量 或 函数 本 应 该 是 私有 的 ， 正 确 
的 代码 应 该 是 可 以 阻止 对 这 些 变 量 或 函数 进行 访问 的 。 



































例如 : 


function doSomething(a) { 
b = a + doSomethingElse( a * 2 ); 


console.log( b * 3 ); 
} 


function doSomethingElse(a) { 
returna - 1; 


var b; 


doSomething( 2 ); // 15 


在 这 个 代码 片段 中 ， 变 量 b 和 函数 doSomethingElse(..) 应 该 是 doSomething(..) 内 部 具体 
实现 的 “私有 ”内 容 。 给 予 外 部 作用 域 对 b 和 doSomethingELse(..) 的 “访问 权限 ”不 仅 
没有 必要 ， 而 且 可 能 是 “危险 ”的 ， 因 为 它们 可 能 被 有 意 或 无 意 地 以 非 预 期 的 方式 使 用 ， 
从 而 导致 超出 了 deSomething(..) 的 适用 条 件 。 更 “合理 ”的 设计 会 将 这 些 私 有 的 具体 内 
容 隐 藏 在 doSomething(..) 内 部 ， 例 如: 








function doSomething(a) { 
function doSomethingElse(a) { 
return a - 1; 


} 
var b; 
b = a + doSomethingElse( a * 2 ); 


console.log( b * 3 ); 
} 


doSomething( 2 ); // 15 
现在 ，b 和 doSomethingElse(..) 都 无 法 从 外 部 被 访问 ， 而 只 能 被 dosomething(..) 所 控制 。 
功能 性 和 最 终 效果 都 没有 受 影响 ， 但 是 设计 上 将 具体 内 容 私 有 化 了 ， 设 计 和 良好 的 软件 都 会 
依 此 进行 实现 。 
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规避 冲突 

“隐藏 ”作用 域 中 的 变量 和 国 数 所 带 来 的 另 一 个 好 处 ， 是 可 以 避免 同名 标识 符 之 间 的 冲突 ， 
两 个 标识 符 可 能 具有 相同 的 名 字 但 用 途 却 不 一 样 ， 无 意 间 可 能 造成 命名 冲突 。 冲 突 会 导致 
变量 的 值 被 意外 覆盖 。 











例如 : 


function foo() { 
function bar(a) f 
i23; // 修改 for 循环 所 属 作用 域 中 的 1 


console.log( a + i ); 





} 


for (var i-0; i<10; i++) { 
bar( i * 2 ); // W$, ERIA T! 
} 
J 


foo(); 


bar(..) 内 部 的 赋值 表达 式 i = 3 意外 地 覆盖 了 声明 在 fool.) 内 部 for 循环 中 的 1。 在 这 
个 例子 中 将 会 导致 无 限 循 环 ， 因 为 i 被 固定 设置 为 3， 永 远 满 足 小 于 10 这 个 条 件 。 





bar(..) 内 部 的 赋值 操作 需要 声明 一 个 本 地 变量 来 使 用 ， 采 用 任何 名 字 都 可 以 ，var i= 3; 
就 可 以 请 足 这 个 需求 〈 同 时 会 为 1 声明 一 个 前 面 提 到 过 的 “遮蔽 变量 ") 。 另 外 一 种 方法 是 
采用 一 个 完全 不 同 的 标识 符 名 称 ， 比 如 var j= 3;。 但 是 软件 设计 在 某 种 情况 下 可 能 自然 
而 然 地 要 求 使 用 同样 的 标识 符 名 称 ， 因 此 在 这 种 情况 下 使 用 作用 域 来 “隐藏 ”内 部 声明 是 
唯一 的 最 佳 选 择 。 


1. 全 局 命名 空间 
变量 冲突 的 一 个 典型 例子 存在 于 全 局 作用 域 中 。 当 程序 中 加 载 了 多 个 第 三 方 库 时 ， 如 果 它 
们 没有 妥善 地 将 内 部 私有 的 函数 或 变量 隐藏 起 来 ， 就 会 很 容易 引发 冲突 。 














这 些 库 通常 会 在 全 局 作用 域 中 声明 一 个 名 字 足 够 独特 的 变量 ， 通 常 是 一 个 对 象 。 这 个 对 象 
被 用 作 库 的 命名 空间 ， 所 有 需要 暴露 给 外 界 的 功能 都 会 成 为 这 个 对 象 〈 命 名 空间 ) 的 属 
性 ， 而 不 是 将 自己 的 标识 符 暴 漏 在 顶级 的 词法 作用 域 中 。 


例如 : 








var MyReallyCoolLibrary = { 
awesome: "stuff", 
doSomething: function() { 
J a 


doAnotherThing: function() { 
I. 
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} 
}; 
2. 模块 管理 
另外 一 种 避免 冲突 的 办 法 和 现代 的 模块 机 制 很 接近 ， 就 是 从 众多 模块 管理 器 中 挑选 一 个 来 
使 用 。 使 用 这 些 工 具 ， 任 何 库 都 无 需 将 标识 符 加 入 到 全 局 作用 域 中 ， 而 是 通过 依赖 管理 器 
的 机 制 将 库 的 标识 符 显 式 地 导入 到 另外 一 个 特定 的 作用 域 中 。 





显而易见 ， 这 些 工 具 并 没有 能 够 违反 词法 作用 域 规则 的 “神奇 ”功能 。 它 们 只 是 利用 作用 
域 的 规则 强制 所 有 标识 符 都 不 能 注入 到 共享 作用 域 中 ， 而 是 保持 在 私有 、 无 冲突 的 作用 域 
中 ， 这 样 可 以 有 效 规避 掉 所 有 的 意外 冲突 。 


因此 ， 只 要 你 愿意 ， 即 使 不 使 用 任何 依赖 管理 工具 也 可 以 实现 相同 的 功效 。 第 5 章 会 介绍 
模块 模式 的 详细 内 容 。 


3.3 函数 作用 域 


我 们 已 经 知道 ， 在 任意 代码 片段 外 部 添加 包装 函数 ， 可 以 将 内 部 的 变量 和 函数 定义 “ 隐 
藏 ”起 来 ， 外 部 作用 域 无 法 访问 包装 函数 内 部 的 任何 内 容 。 


例如 : 








var a = 2; 
function foo() { // <-- 添加 这 一 行 


var a = 3; 
console.log( a ); // 3 


}// <-- 以 及 这 一 行 
foo(); // <-- 以 及 这 一 行 


console.log( a ); // 2 


虽然 这 种 技术 可 以 解决 一 些 问题 ,但 是 它 并 不 理想 ， 因 为 会 导致 一 些 额 外 的 问题 。 首 先 ， 
必须 声明 一 个 具名 函数 foo()， 意 味 着 foo 这 个 名 称 本 身 “ 污 染 ” 了 所 在 作用 域 (在 这 个 
例子 中 是 全 局 作用 域 )。 基 次， 必须 显 式 地 通过 函数 名 (foo()) 调用 这 个 函数 才能 运行 其 
中 的 代码 。 


如 果 函 数 不 需 要 函数 名 (或 者 至 少 函数 名 可 以 不 污染 所 在 作用 域 )， 并 且 能 够 自动 运行 ， 
这 将 会 更 加 理想 。 


SET, JavaScript 提供 了 能 够 同时 解决 这 两 个 问题 的 方案 、 











vara-2; 
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(function foo()( // «-- 添加 这 一 行 


var a = 3; 
console.log( a ); // 3 


DO; // «- 以 及 这 一 行 
console.log( a ); // 2 
接 下 来 我 们 分 别 介绍 这 里 发 生 的 事情 。 


首先 ， 包 装 函 数 的 声明 以 (function.. 而 不 仅 是 以 function... 开始 。 尽 管 看 上 去 这 并 不 
是 一 个 很 显眼 的 细节 ， 但 实际 上 却 是 非常 重要 的 区 别 。 函 数 会 被 当 作 函 数 表达 式 而 不 是 一 
个 标准 的 函数 声明 来 处 理 。 








区 分 函数 声明 和 表达 式 最 简单 的 方法 是 看 function 关键 字 出 现在 声明 中 的 位 
置 (不 仅仅 是 一 行 代码 ， 而 是 整个 声明 中 的 位 置 )。 如 果 function 是 声明 中 
的 第 一 个 词 ， 那 么 就 是 一 个 函数 声明 ， 否 则 就 是 一 个 函数 表达 式 。 











函数 声明 和 函数 表达 式 之 间 最 重要 的 区 别 是 它们 的 名 称 标识 符 将 会 绑 定 在 何 处 。 


比较 一 下 前 面 两 个 代码 片段 。 第 一 个 片段 中 foo 被 绑 定 在 所 在 作用 域 中 ， 可 以 直接 通过 
foo() 来 调用 它 。 第 二 个 片段 中 foo 被 绑 定 在 函数 表达 式 自 身 的 函数 中 而 不 是 所 在 作用 域 中 。 





换 名 话说 ，(function foo(){ .. P 作为 函数 表达 式 意味 着 foo 只 能 在 … 所 代表 的 位 置 中 
被 访问 ， 外 部 作用 域 则 不 行 。foo 变量 名 被 隐藏 在 自身 中 意味 着 不 会 非 必 要 地 污染 外 部 作 
用 域 。 


3.31 匿名 和 具名 


对 于 函数 表达 式 你 最 熟悉 的 场景 可 能 就 是 回调 参数 了 ， 比 如 : 








setTimeout( function() { 
console.log("I waited 1 second!"); 
), 1000 ); 


ix IEEE SE AGA AX. DIA function .. 没有 名 称 标识 符 。 函 数 表达 式 可 以 是 匿名 的 ， 
而 函数 声明 则 不 可 以 省 略 函 数 名 一 一 在 JavaScript 的 语法 中 这 是 非法 的 。 


匿名 函数 表达 式 书 写 起 来 简单 快捷 ， 很 多 库 和 工具 也 倾向 鼓励 使 用 这 种 风格 的 代码 。 但 是 
它 也 有 几 个 缺点 需要 考虑 。 


l. 匿名 函数 在 栈 追 踪 中 不 会 显示 出 有 意义 的 函数 名 ,使 得 调试 很 困难 。 
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2. 如 果 没 有 函数 名 ， 当 函数 需要 引用 自身 时 只 能 使 用 已 经 过 期 的 arguments.callee 引用 ， 
比如 在 递归 中 。 另 一 个 函数 需要 引用 自身 的 例子 ， 是 在 事件 触发 后 事件 监听 器 需要 解 绑 
HE. 

3. 匿名 国 数 省 略 了 对 于 代码 可 读 性 /可 理解 性 很 重要 的 国 数 名 。 一 个 描述 性 的 名 称 可 以 让 
代码 不 言 自 明 。 


行内 元 数 表 达 式 非常 强大 且 有 用 一 一 匿名 和 具名 之 间 的 区 别 并 不 会 对 这 点 有 任何 影响 。 给 函 
数 表达 式 指定 一 个 函数 名 可 以 有 效 解决 以 上 问题 。 始 终 给 函数 表达 式 命名 是 一 个 最 佳 实践 : 


Td 




















setTimeout( function timeoutHandler() ( // «-- 快 看 ， 我 有 名 字 了 ! 


console.log( "I waited 1 second!" ); 
), 1000 ); 


3.3.2 ”立即 执行 函数 表达 式 
vara-2; 
(function foo() { 


var a = 3; 
console.log( a ); // 3 


pO; 

console.log( a ); // 2 
由 于 函数 被 包含 在 一 对 (”) 括号 内 部 ， 因 此 成 为 了 一 个 表达 式 ， 通 过 在 末尾 加 上 另外 一 个 
€ o 可 以 立即 执行 这 个 函数 ， 比 如 (function foot .. })()。 第 一 个 ( ) 将 函数 变 成 表 
达 式 ， 第 二 个 ( ) 执行 了 这 个 函数 。 








这 种 模式 很 常见 ， 几 年 前 社区 给 它 规定 了 一 个 术语 : IFE， 代 表 立 即 执行 函 数 表达 式 


(Immediately Invoked Function Expression ) ; 





国 数 名 对 IFE 当然 不 是 必须 的 ，IIFE 最 常见 的 用 法 是 使 用 一 个 匿名 函数 表达 式 。 虽 然 使 
用 具名 函数 的 IFE 并 不 常见 ， 但 它 有 具有 上 述 匿 名 函数 表达 式 的 所 有 优势 ， 因 此 也 是 一 个 值 
得 推广 的 实践 。 








var a = 2; 
(function IIFE() { 


var a = 3; 
console.log( a ); // 3 


DO; 


console.log( a ); // 2 
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相 较 于 传统 的 IFE 形式 ， 很 多 人 都 更 喜欢 另 一 个 改进 的 形式 : (function(){ .. 202. ff 
细 观 察 其 中 的 区 别 。 第 一 种 形式 中 国 数 表 达 式 被 包含 在 C) 中 ， 然 后 在 后 面 用 另 一 个 O 括 
号 来 调用 。 第 二 种 形式 中 用 来 调用 的 O 括号 被 移 进 了 用 来 包装 的 ( ) 括号 中 。 


这 两 种 形式 在 功能 上 是 一 臻 的。 选择 哪个 全 和 任 个 人 喜好 。 








IIFE 的 另 一 个 非常 普遍 的 进 阶 用 法 是 把 它们 当 作 函数 调用 并 传递 参数 进去 。 
例如 : 
var a = 2; 
(function IIFE( global ) { 
var a = 3; 
console.log( a ); // 3 
console.log( global.a ); // 2 
})( window ); 
console.log( a ); // 2 
我 们 将 window 对 象 的 引用 传递 进去 ， 但 将 参数 命名 为 gtlobal， 因 此 在 代码 风格 上 对 全 局 
对 象 的 引用 变 得 比 引用 一 个 没有 “全 局 ”字样 的 变量 更 加 清晰 。 当 然 可 以 从 外 部 作用 域 传 
递 任何 你 需要 的 东西 ， 并 将 变量 命名 为 任何 你 觉得 合适 的 名 字 。 这 对 于 改进 代码 风格 是 非 
第 有 帮助 的 。 








这 个 模式 的 另外 一 个 应 用 场景 是 解决 undefined 标识 符 的 默认 值 被 错误 覆盖 导致 的 异常 ( 虽 
然 不 常见 )。 将 一 个 参数 命名 为 undefined， 但 是 在 对 应 的 位 置 不 传 入 任何 值 ， 这 样 就 可 以 
保证 在 代码 块 中 undefined 标识 符 的 值 真 的 是 undefined; 











undefined = true; // 给 其 他 代码 挖 了 一 个 大 坑 ! 绝对 不 要 这 样 做 | 
(function IIFE( undefined ) { 


var a; 
if (a --- undefined) { 
console.log( "Undefined is safe here!" ); 


} 
DO; 
IFE 还 有 一 种 变化 的 用 途 是 倒置 代码 的 运行 顺序 ， 将 需要 运行 的 函数 放 在 第 二 位 ， 在 IFE 
执行 之 后 当 作 参数 传递 进去 。 这 种 模式 在 UMD (Universal Module Definition) 项 目 中 被 广 
泛 使 用 。 尽 管 这 种 模式 略 显 宛 长 ， 但 有 些 人 认为 它 更 易 理解 。 





var a = 2; 
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(function IIFE( def ) ( 
def( window ); 
J)(function def( global ) { 


var a = 3; 
console.log( a ); // 3 
console.log( global.a ); // 2 


J); 
函数 表达 式 def 定义 在 片段 的 第 二 部 分 ， 然 后 当 作 参数 (这 个 参数 也 叫 作 def) 被 传递 进 
IIFE 函数 定义 的 第 一 部 分 中 。 最 后 ， 参 数 def (也 就 是 传递 进去 的 函数 ) 被 调用 ， 并 将 
window f£ A ?4 E global 参数 的 值 。 


3.4 块 作 用 域 


尽管 函数 作用 域 是 最 常见 的 作用 域 单 元 ， 当 然 也 是 现行 大 多 数 JavaScript 中 最 普遍 的 设计 
方法 ， 但 其 他 类 型 的 作用 域 单元 也 是 存在 的 ， 并 且 通 过 使 用 其 他 类 型 的 作用 域 单元 甚至 可 
以 实现 维护 起 来 更 加 优秀 、 简 洁 的 代码 。 

















除 JavaScript 外 的 很 多 编程 语言 都 支持 块 作用 域 ， 因 此 其 他 语言 的 开发 者 对 于 相关 的 思维 
方式 会 很 熟悉 ， 但 是 对 于 主要 使 用 JavaScript 的 开发 者 来 说 ， 这 个 概念 会 很 陌生 。 








尽管 你 可 能 连 一 行 带 有 块 作用 域 风 格 的 代码 都 没有 写 过 ， 但 对 下 面 这 种 很 常见 的 JavaScript 
代码 一 定 很 熟悉 : 
for (var i-0; i<10; i++) { 


console.log( i ); 


} 
我 们 在 for 循环 的 头 部 直接 定义 了 变量 1， 通常 是 因为 只 想 在 for 循环 内 部 的 上 下 文中 使 
Hi, MART i 会 被 绑 定 在 外 部 作用 域 (函数 或 全 局 ) 中 的 事实 。 


这 就 是 块 作用 域 的 用 处 。 变 量 的 声明 应 该 距离 使 用 的 地 方 越 近 越 好 ， 并 最 大 限度 地 本 地 
化 。 另 外 一 个 例子 : 





var foo = true; 


if (foo) { 
var bar = foo * 2; 
bar = something( bar ); 
console.log( bar ); 


j 


bar 变量 仅 在 if 声明 的 上 下 文中 使 用 ， 因 此 如 果 能 将 它 声明 在 if 块 内 部 中 会 是 一 个 很 有 
意义 的 事情 。 但 是 ， 当 使 用 var 声明 变量 时 ， 它 写 在 哪里 都 是 一 样 的 ， 因 为 它们 最 终 都 会 
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属于 外 部 作用 域 。 这 段 代 码 是 为 了 风格 更 易 读 而 伪装 出 的 形式 上 的 块 作 用 域 ， 如 果 使 用 这 
种 形式 ， 要 确保 没 在 作用 域 其 他 地 方 意外 地 使 用 bar 只 能 依靠 自觉 性 。 


块 作用 域 是 一 个 用 来 对 之 前 的 最 小 授权 原则 进行 扩展 的 工具 ， 将 代码 从 在 函数 中 隐藏 信息 
扩展 为 在 块 中 隐藏 信息 。 





再 次 考虑 for 循环 的 例子 : 


for (var i-0; i«10; i++) ( 
console.log( i ); 


} 


为 什么 要 把 一 个 只 在 for 循环 内 部 使 用 (至少 是 应 该 只 在 内 部 使 用 ) 的 变量 i 污染 到 整个 
函数 作用 域 中 呢 ? 





更 重要 的 是 ， 开 发 者 需要 检查 自己 的 代码 ， 以 避免 在 作用 范围 外 意外 地 使 用 (或 复 用 ) 3E 
些 变量 ， 如 果 在 错误 的 地 方 使 用 变量 将 导致 未 知 变量 的 异常 。 变 量 i 的 块 作用 域 (如 果 存 
在 的 话 ) 将 使 得 其 只 能 在 for 循环 内 部 使 用 ， 如 果 在 函数 中 其 他 地 方 使 用 会 导致 错误 。 这 
对 保证 变量 不 会 被 混乱 地 复 用 及 提升 代码 的 可 维护 性 都 有 很 大 帮助 。 


但 可 惜 ， 表面 上 看 JavaScript 并 没有 块 作用 域 的 相关 功能 。 
除非 你 更 加 深入 地 研究 。 




















3.4.1 with 
我 们 在 第 2 章 讨论 过 with 关键 字 。 它 不 仅 是 一 个 难于 理解 的 结构 ， 同 时 也 是 块 作用 域 的 一 
个 例子 ( 块 作用 域 的 一 种 形式 )， 用 with 从 对 象 中 创建 出 的 作用 域 仅 在 with 声明 中 而 非 外 
部 作用 域 中 有 效 。 





3.4.2 try/catch 


非常 少 有 人 会 注意 到 JavaScript 的 ES3 规范 中 规定 try/catch 的 catch 分 句 会 创建 一 个 块 作 
用 域 ， 其 中 声明 的 变量 仅 在 catch 内 部 有 效 。 


例如 : 














try { 
undefined(); // 执行 一 个 非法 操作 来 强制 制造 一 个 异常 





catch (err) ( 
console.log( err ); // 能 够 正常 执行 ! 
} 


console.log( err ); // ReferenceError: err not found 
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正如 你 所 看 到 的 ，err 仅 存在 catch 分 名 内部， 当 试 图 从 别处 引用 它 时 会 抛 出 错误 。 








尽管 这 个 行为 已 经 被 标准 化 ， 并 且 被 大 部 分 的 标准 JavaScript 环境 (除了 老 
版 本 的 下 浏览 器 ) 所 支持 ， 但 是 当 同一 个 作用 域 中 的 两 个 或 多 个 catch 分 名 
用 同样 的 标识 符 名 称 声明 错误 变量 时 ， 很 多 静态 检查 工具 还 是 会 发 出 警告 。 
实际 上 这 并 不 是 重复 定义 ， 因 为 所 有 变量 都 被 安全 地 限制 在 块 作 用 域内 部 ， 
但 是 静态 检查 工具 还 是 会 很 烦人 地 发 出 警告 。 














为 了 避免 这 个 不 必要 的 警告 ， 很 多 开发 者 会 将 catch 的 参数 命名 为 err1、 
err2 等 。 也 有 开发 者 干脆 关闭 了 静态 检查 工具 对 重复 变量 名 的 检查 。 





也 许 catch 分 名 会 创建 块 作用 域 这 件 事 看 起 来 像 教 条 的 学 院 理论 一 样 没什么 用 处 ， 但 是 查 
看 附录 B 就 会 发 现 一 些 很 有 用 的 信息 。 


3.4.3 let 


到 目前 为 止 ， 我 们 知道 JavaScript 在 暴露 块 作用 域 的 功能 中 有 一 些 奇 怪 的 行为 。 如 果 仅 仅 
是 这 样 ， 那 么 JavaScript 开发 者 多 年 来 也 就 不 会 将 块 作 用 域 当 作 非 常 有 用 的 机 制 来 使 用 了 。 


EAF, ES6 改变 了 现状 ， 引 入 了 新 的 Vet 关键 字 ， 提 供 了 除 var 以 外 的 另 一 种 变量 声明 方式 。 








let 关键 字 可 以 将 变量 绑 定 到 所 在 的 任意 作用 域 中 〈 通 常 是 { .. } 内 部 )。 换 句 话说 ，let 
为 其 声明 的 变量 隐 式 地 了 所 在 的 块 作用 域 。 











var foo = true; 


if (foo) ( 
let bar - foo * 2; 
bar = something( bar ); 
console.log( bar ); 


} 


console.log( bar ); // ReferenceError 


用 Vet 将 变量 附加 在 一 个 已 经 存在 的 块 作用 域 上 的 行为 是 隐 式 的 。 在 开发 和 修改 代码 的 过 
程 中 ， 如 果 没 有 密切 关注 哪些 块 作用 域 中 有 绑 定 的 变量 ， 并 且 习 惯性 地 移动 这 些 块 或 者 将 
其 包含 在 其 他 的 块 中 ， 就 会 导致 代码 变 得 混乱 。 

为 块 作用 域 显 式 地 创建 块 可 以 部 分 解决 这 个 问题 ， 使 变量 的 附属 关系 变 得 更 加 清晰 。 通 常 


来 讲 ， 显 式 的 代码 优 于 隐 式 或 一 些 精巧 但 不 清晰 的 代码 。 显 式 的 块 作用 域 风格 非常 容易 书 
写 ， 并 且 和 其 他 语言 中 块 作用 域 的 工作 原理 一 致 : 











var foo = true; 





if (foo) { 
{ // <-- 显 式 的 快 
let bar = foo * 2; 
bar = something( bar ); 
console.log( bar ); 
} 
} 


console.log( bar ); // ReferenceError 
只 要 声明 是 有 效 的 ， 在 声明 中 的 任意 位 置 都 可 以 使 用 { .. } 插 号 来 为 Let 创建 一 个 用 于 绑 


定 的 块 。 在 这 个 例子 中 ， 我 们 在 if 声明 内 部 显 式 地 创建 了 一 个 块 ， 如 果 需 要 对 其 进行 重 
构 ， 整 个 块 都 可 以 被 方便 地 移动 而 不 会 对 外 部 if 声明 的 位 置 和 语义 产生 任何 影响 。 


























关于 另外 一 种 显 式 的 块 作用 域 表 达 式 的 内 容 ， 请 查看 附录 B. 























在 第 4 章 ， 我 们 会 讨论 提升 ， 提 升 是 指 声明 会 被 视 为 存在 于 其 所 出 现 的 作用 域 的 整个 范围 内 。 


但 是 使 用 Vet 进行 的 声明 不 会 在 块 作用 域 中 进行 提升 。 声 明 的 代码 被 运行 之 前 ， 声 明 并 不 
“存在 ”。 


{ 
console.log( bar ); // ReferenceError! 
let bar = 2; 
} 
1. 垃圾 收集 








另 一 个 块 作用 域 非 常 有 用 的 原因 和 了 闲 包 及 回收 内 存 垃圾 的 回收 机 制 相关 。 这 里 简要 说 明 一 
下 ， 而 内 部 的 实现 原理 ， 也 就 是 闭 包 的 机 制 会 在 第 5 章 详 细 解 释 。 
考虑 以 下 代码 : 

function process(data) { 

r // 在 这 里 做 点 有 趣 的 事情 

var someReallyBigData - ( .. ); 

process( someReallyBigData ); 

var btn - document.getElementById( "my button" ); 

btn.addEventLlistener( "click", function click(evt) { 


console.log("button clicked"); 
}, /*capturingPhase-*[false ); 
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click 国 数 的 点 击 回调 并 不 需要 someReallyBigData 变量 。 理 论 上 这 意味 着 当 process(..) 执 
行 后 ， 在 内 存 中 占用 大 量 空间 的 数据 结构 就 可 以 被 垃圾 回收 了 。 但 是 ， 由 于 click 函数 形成 
了 一 个 覆盖 整个 作用 域 的 闭 包 ，JavaScript 引擎 极 有 可 能 依然 保存 着 这 个 结构 (取决 于 具体 
实现 )。 























块 作用 域 可 以 打消 这 种 顾虑 ， 可 以 让 引擎 清楚 地 知道 没有 必要 继续 保存 someReallyBigData T; 





function process(data) { 


// 在 这 里 做 点 有 趣 的 事 | 





E 
H 


j 
// 在 这 个 块 中 定义 的 内 容 可 以 销毁 了 | 
{ 





let someReallyBigData = { .. ); 


process( someReallyBigData ); 


} 
var btn = document.getElementById( "my_button" ); 
btn.addEventListener( "click", function click(evt){ 


console.log("button clicked"); 
}, /*capturingPhase=*/false ); 


为 变量 显 式 声明 块 作用 域 ， 并 对 变量 进行 本 地 绑 定 是 非常 有 用 的 工具 ， 可 以 把 它 添 加 到 你 
的 代码 工具 箱 中 了 。 
2. Let 循环 
一 个 let 可 以 发 挥 优势 的 典型 例子 就 是 之 前 讨论 的 for 循环 。 

for (let i=0; i<10; i++) { 

console.log( i ); 

} 

console.log( i ); // ReferenceError 
for 循环 头 部 的 let 不 仅 将 i HEET for 循环 的 块 中 ， 事 实 上 它 将 其 重新 绑 定 到 了 循环 
的 每 一 个 选 代 中 ， 确 保 使 用 上 一 个 循环 返 代 结束 时 的 值 重新 进行 研 值 。 




















下 面 通过 另 一 种 方式 来 说 明 每 次 选 代 时 进行 重新 绑 定 的 行为 ， 
{ 
let j; 
for (j=0; j<10; j++) { 
let i = j; // 每 个 迭代 重新 绑 定 ! 
console.log( i ); 
} 
} 


每 个 磷 代 进 行 重新 绑 定 的 原因 非常 有 趣 ， 我 们 会 在 第 5 章 讨 论 朵 包 时 进行 说 明 。 
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由 于 let 声明 附属 于 一 个 新 的 作用 域 而 不 是 当前 的 函数 作用 域 (也 不 属于 全 局 作用 域 )， 
代码 中 存在 对 于 函数 作用 域 中 var 声明 的 隐 式 依赖 时 ， 就 会 有 很 多 隐藏 的 陷阱 ， 如 采用 
let KEME var 则 需要 在 代码 重 构 的 过 程 中 付出 额外 的 精力 。 


Uk 





考虑 以 下 代码 : 
var foo = true, baz = 10; 


if (foo) { 
var bar = 3; 


if (baz > bar) ( 
console.log( baz ); 


} 


1 
} 


这 段 代 码 可 以 简单 地 被 重 构成 下 面 的 同等 形式 : 


var foo = true, baz = 10; 


if (foo) { 
var bar = 3; 
Il es 

} 


if (baz > bar) { 
console.log( baz ); 


j 
但 是 在 使 用 块 级 作用 域 的 变量 时 需要 注意 以 下 变化 : 
var foo = true, baz = 10; 


if (foo) ( 
let bar = 3; 


if (baz > bar) ( // «-- 移动 代码 时 不 要 忘 了 bar! 
console.log( baz ); 
} 


j 


参考 附录 B， 其 中 介绍 了 另外 一 种 块 作用 域 形 式 ， 可 以 用 更 健壮 的 方式 实现 目的 ， 并 且 写 
出 的 代码 更 易 维 护 和 重 构 。 

















3.4.4 const 


除了 Vet 以 外 ，ES6 还 引入 了 const， 同 样 可 以 用 来 创建 块 作用 域 变量 ,但 其 值 是 固定 的 
(常量 )。 之 后 任何 试图 修改 值 的 操作 都 会 引起 错误 。 
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var foo - true; 


if (foo) ( 
var a = 2; 


const b = 3; // 包含 在 if 中 的 块 作用 域 常 


[n 








= 3; // 正常 ! 
b = 4; // 错误 ! 
j 


console.log( a ); // 3 
console.log( b ); // ReferenceError! 


3.5 Jh% 


国 数 是 JavaScript 中 最 常见 的 作用 域 单元 。 本 质 上 ， 声 明 在 一 个 国 数 内 部 的 变量 或 函数 会 
在 所 处 的 作用 域 中 “隐藏 ”起 来 ， 这 是 有 意 为 之 的 良好 软件 的 设计 原则 。 











但 函数 不 是 唯一 的 作用 域 单元 。 块 作用 域 指 的 是 变量 和 函数 不 仅 可 以 属于 所 处 的 作用 域 ， 
也 可 以 属于 某 个 代码 块 (通常 指 { .. Y 内 部 )。 


从 ES3 开始 ，try/catch 结构 在 catch 分 句 中 具有 块 作用 域 。 


在 ES6 中 引入 了 let 关键 字 (var 关键 字 的 表亲 )， 用 来 在 任意 代码 块 中 声明 变量 。if 
C.) { let a = 2; } 会 声明 一 个 支持 了 if 的 { .. } 块 的 变量 ， 并 且 将 变量 添加 到 这 个 块 
中 。 


有 些 人 认为 块 作 用 域 不 应 该 完全 作为 国 数 作用 域 的 替代 方案 。 两 种 功能 应 该 同时 存在 ， 开 
发 者 可 以 并 且 也 应 该 根据 需要 选择 使 用 何 种 作用 域 ， 创 造 可 读 、 可 维护 的 优良 代码 。 
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提升 





到 现在 为 止 ， 你 应 该 已 经 很 熟悉 作用 域 的 概念 ， 以 及 根据 声明 的 位 置 和 方式 将 变量 分 配给 
作用 域 的 相关 原理 了 。 函 数 作用 域 和 块 作用 域 的 行为 是 一 样 的 ， 可 以 总 结 为 :任何 声明 在 
某 个 作用 域内 的 变量 ， 都 将 附属 于 这 个 作用 域 。 





但 是 作用 域 同 其 中 的 变量 声明 出 现 的 位 置 有 某 种 微妙 的 联系 ， 而 这 个 细节 正 是 我 们 将 要 讨 
论 的 内 容 。 


4.1 先 有 鸡 还 是 先 有 蛋 


直觉 上 会 认为 JavaScript 代码 在 执行 时 是 由 上 到 下 一 行 一 行 执行 的 。 但 实际 上 这 并 不 完全 
正确 ， 有 一 种 特殊 情况 会 导致 这 个 假设 是 错误 的 。 





考虑 以 下 代码 : 
a 三 2; 
var a; 


console.log( a ); 





你 认为 console.tog(..) 声明 会 输出 什么 呢 ? 


很 多 开发 者 会 认为 是 undefined， 因 为 var a 声明 在 a = 2 之后， 他 们 自然 而 然 地 认为 变量 
被 重新 赋值 了 ， 因 此 会 被 赋予 默认 值 undefined, (H, 真正 的 输出 结果 是 2. 
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考虑 男 外 一 段 代码 : 
console.log( a ); 
vara-2; 


鉴于 上 一 个 代码 片段 所 表现 出 来 的 某 种 非 自 上 而 下 的 行为 特点 ， 你 可 能 会 认为 这 个 代码 片 
段 也 会 有 同样 的 行为 而 输出 2。 还 有 人 可 能 会 认为 ， 由 于 变量 a 在 使 用 前 没有 先进 行 声 明 ， 
因此 会 抛 出 ReferenceError 异常 。 











不 地 的 是 两 种 猜测 都 是 不 对 的 。 输 出 来 的 会 是 undefined, 





那么 到 底 发 生 了 什么 ? 看 起 来 我 们 面 对 的 是 一 个 先 有 鸡 还 是 先 有 和 蛋 的 问题 。 到 底 是 声明 
(E) 在 前 ， 还 是 赋值 ( 鸡 ) 在 前 ? 


4.2 Eus BE EKZ 


为 了 搞 明 白 这 个 问题 ， 我 们 需要 回顾 一 下 第 1 章 中 关于 编译 器 的 内 容 。 回 忆 一 下 ， 引 擎 会 
在 解释 JavaScript 代码 之 前 首先 对 其 进行 编译 。 编 译 阶 段 中 的 一 部 分 工作 就 是 找到 所 有 的 
声明 ， 并 用 合适 的 作用 域 将 它们 关联 起 来 。 第 2 章 中 展示 了 这 个 机 制 ， 也 正 是 词法 作用 域 
的 核心 内 容 。 


因此 ， 正 确 的 思考 思路 是 ， 包 括 变量 和 函数 在 内 的 所 有 声明 都 会 在 任何 代码 被 执行 前 首先 
被 处 理 。 




















当 你 看 到 var a = 2; 时 ， 可 能 会 认为 这 是 一 个 声明 。 但 JavaScript 实际 上 会 将 其 看 成 两 个 
声明 : var a; 和 a = 2;。 第 一 个 定义 声明 是 在 编译 阶段 进行 的 。 第 二 个 赋值 声明 会 被 留 在 
原 地 等 待 执行 阶段 。 








我 们 的 第 一 个 代码 片段 会 以 如 下 形式 进行 处 理 : 
var a; 
a 22; 


console.log( a ); 














其 中 第 一 部 分 是 编译 ， 而 第 二 部 分 是 执行 。 

















类 似 地 ， 我 们 的 第 二 个 代码 片段 实际 是 按照 以 下 流程 处 理 的 : 





var a; 
console.log( a ); 


d 22; 
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因此 ， 打 个 比方 ， 这 个 过 程 就 好 像 变 量 和 函数 声明 从 它们 在 代码 中 出 现 的 位 置 被 “移动 ” 
到 了 最 上 面 。 这 个 过 程 就 叫 作 提升 。 














换 句 话说 ， 先 有 去 (声明 ) 后 有 鸡 URE). 








只 有 声明 本 身 会 被 提升 ， 而 赋值 或 其 他 运行 逻辑 会 留 在 原 地 。 如 果 提 升 改变 
了 代码 执行 的 顺序 ， 会 造成 非常 严重 的 破坏 。 





foo(); 


function foo() ( 
console.log( a ); // undefined 
var a = 2; 


j 


foo 函数 的 声明 (这 个 例子 还 包括 实际 函数 的 隐 含 值 ) 被 提升 了 ， 因 此 第 一 行 中 的 调用 可 
以 正常 执行 。 














另外 值得 注意 的 是 ， 每 个 作用 域 都 会 进行 提升 操作 。 尽 管 前 面 大 部 分 的 代码 片段 已 经 简化 
了 (因为 它们 只 包含 全 局 作用 域 )， 而 我 们 正在 讨论 的 fool.) 函数 自身 也 会 在 内 部 对 var 
a 进行 提升 (显然 并 不 是 提升 到 了 整个 程序 的 最 上 方 )。 因 此 这 上段 代码 实际 上 会 被 理解 为 下 
面 的 形式 ， 

















function foo() { 
var aj 


console.log( a ); // undefined 


d= 2; 
} 


foo(); 
可 以 看 到 ， 函 数 声 明 会 被 提升 ,但 是 函数 表达 式 却 不 会 被 提升 。 
foo(); // 不 是 ReferenceError ， 而 是 TypeError! 


var foo = function bar() { 


Il... 


这 段 程序 中 的 变量 标识 符 foo() 被 提升 并 分 配给 所 在 作用 域 (在 这 里 是 全 局 作用 域 ) ， 因 此 
foo() 不 会 导致 ReferenceError。 但 是 foo 此 时 并 没有 赋值 (如 果 它 是 一 个 函数 声明 而 不 
是 函数 表达 式 ， 那 么 就 会 赋值 )。foo() 由 于 对 undefined 值 进 行 函 数 调用 而 导致 非法 操作 ， 
因此 抛 出 TypeError 异常 。 


同时 也 要 记 住 ， 即 使 是 具名 的 函数 表达 式 ， 名 称 标识 符 在 赋值 之 前 也 无 法 在 所 在 作用 域 中 














使 用 : 


foo(); // TypeError 
bar(); // ReferenceError 


var foo = function bar() { 
Hs 


s 














这 个 代码 片段 经 过 提升 后 ， 实 际 上 会 被 理解 为 以 下 形式 : 





var foo; 


foo(); // TypeError 
bar(); // ReferenceError 


foo = function() { 


var bar = ...self... 


Ji ass 


4.3 函数 优先 
Eur Tute eee. 但 是 一 个 值得 注意 的 细节 (这 个 细节 可 以 出 现在 有 多 个 
重复 ”声明 的 代码 中 ) 是 函数 会 首先 被 提升 ， 然 后 才 是 变量 。 


考虑 以 下 代码 : 





foo(); // 1 
var foo; 


function foo() { 
console.log( 1 ); 
} 


foo = function() { 
console.log( 2 ); 
3 


会 输出 1 而 不 是 21 这 个 代码 片段 会 被 引擎 理解 为 如 下 形式 : 














function foo() { 
console.log( 1 ); 
} 


foo(); // 1 
foo = function() { 


console.log( 2 ); 
5 
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注意 ，var foo 尽管 出 现在 function foo()... 的 声明 之 前 ， 但 它 是 重复 的 声明 (因此 被 忽 
略 了 )， 因 为 函数 声明 会 被 提升 到 普通 变量 之 前 。 











尽管 重复 的 var 声明 会 被 忽略 掉 ， 但 出 现在 后 面 的 函数 声明 还 是 可 以 覆盖 前 面 的 。 











foo(); // 3 


function foo() { 
console.log( 1 ); 


j 


var foo = function() { 
console.log( 2 ); 
Hh 


function foo() { 
console.log( 3 ); 


} 
虽然 这 些 听 起 来 都 是 些 无 用 的 学 院 理 论 ， 但 是 它 说 明了 在 同一 个 作用 域 中 进行 重复 定义 是 
非常 糟糕 的 ， 而 且 经 常会 导致 各 种 奇怪 的 问题 。 
一 个 普通 块 内 部 的 函数 声明 通常 会 被 提升 到 所 在 作用 域 的 顶部 ， 这 个 过 程 不 会 像 下 面 的 代 
码 暗示 的 那样 可 以 被 条 件 判断 所 控制 : 




















fooQ; // "b" 


var a - true; 
if (a) { 


function foo() { console.log("a"); } 


else { 
function foo() { console.log("b"); } 








但 是 需要 注意 这 个 行为 并 不 可 靠 ， 在 JavaScript 未 来 的 版 本 中 有 可 能 发 生 改 变 ， 因 此 应 该 
尽 可 能 避免 在 块 内 部 声明 函数 。 











4.4 小 结 

我 们 习惯 将 var a = 2; 看 作 一 个 声明 ， 而 实际 上 JavaScript 引擎 并 不 这 么 认为 。 它 将 var a 
和 a = 2 当 作 两 个 单独 的 声明 ， 第 一 个 是 编译 阶段 的 任务 ， 而 第 二 个 则 是 执行 阶段 的 任务 。 
这 意味 着 无 论 作 用 域 中 的 声明 出 现在 什么 地 方 ， 都 将 在 代码 本 身 被 执行 前 首先 进行 处 理 。 
可 以 将 这 个 过 程 形象 地 想象 成 所 有 的 声明 (变量 和 函数 ) 都 会 被 “移动 ”到 各 自作 用 域 的 
最 顶端 ， 这 个 过 程 被 称 为 提升 。 


























声明 本 身 会 被 提升 ， 而 包括 函数 表达 式 的 赋值 在 内 的 赋值 操作 并 不 会 提升 。 
要 注意 避免 重复 声明 ， 特 别 是 当 普 


普通 的 var 声明 和 函数 声明 混合 在 一 起 的 时 候 ， 否 则 会 引 
起 很 多 危险 的 问题 ! 








第 5 章 


作用 域 闭 包 














接 下 来 的 内 容 需 要 对 作用 域 工作 原理 相关 的 基础 知识 有 非常 深入 的 理解 。 








我 们 将 广 意 力 转 移 到 这 门 语 言 中 一 个 非常 重要 但 又 难以 掌握 ， 近 了 手 神话 的 概念 上 : HIE. 
如 果 你 了 解 了 之 前 关于 词法 作用 域 的 讨论 ， 那 么 闭 包 的 概念 几乎 是 不 言 自 明 的 。 魔 术 师 的 
幕布 后 藏 着 一 个 人 ， 我 们 将 要 揭 开 他 的 伪装 。 我 可 没 说 这 个 人 是 Crockford | 





在 继续 学 习 之 前 ， 如 果 你 还 是 对 词法 作用 域 相 关内 容 有 疑问 ， 可 以 重新 回顾 一 下 第 2 章 中 
的 相关 内 容 ， 现 在 是 个 好 机 会 。 


5.1 Im 


对 于 那些 有 一 点 JavaScript 使 用 经 验 但 从 未 真正 理解 闭 包 概念 的 人 来 说 ， 理 解 闭 包 可 以 看 
作 是 某 种 意义 上 的 重生 ， 但 是 需要 付出 非常 多 的 努力 和 由 牲 才能 理解 这 个 概念 。 
































回忆 我 前 几 年 的 时 光 ， 大 量 使 用 JavaScript 但 却 完全 不 理解 闭 包 是 什么 。 总 是 感觉 这 门 语 
言 有 其 隐蔽 的 一 面 ， 如 果 能 够 掌握 将 会 功力 大 涨 ， 但 讽刺 的 是 我 始终 无 法 掌握 其 中 的 门 
道 。 还 记得 我 曾经 大 量 阅 读 早 期 框架 的 源码 ， 试 图 能 够 理解 闭 包 的 工作 原理 。 现 在 还 能 回 
忆 起 我 的 脑海 中 第 一 次 浮现 出 关于 “模块 模式 ”相关 概念 时 的 激动 心情 。 


那 时 我 无 法 理解 并 且 倾 尽数 年 心血 来 探索 的 ， 也 就 是 我 马上 要 传授 给 你 的 秘诀 : JavaScript 



























































iE 1: Douglas Crockford 是 Web 开发 领域 最 知名 的 技术 权威 之 一 ，ECMA JavaScript 2.0 标准 化 委员 会 委员 ， 
被 JavaScript 之 父 Brendan Eich 称 为 JavaScript 界 的 宗师 。 一 一 译 者 注 
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中 闭 包 无 处 不 在 ， 你 只 需要 能 够 识别 并 拥抱 它 。 闭 包 并 不 是 一 个 需要 学 习 新 的 语法 或 模式 
才能 使 用 的 工具 ， 它 也 不 是 一 件 必 须 接受 像 Luke? 一 样 的 原 力 训 练 才能 使 用 和 掌握 的 武器 。 
闭 包 是 基于 词法 作用 域 书写 代码 时 所 产生 的 自然 结果 ， 你 其 至 不 需要 为 了 利用 它们 而 有 意 


识 地 创建 困 包 。 闭 包 的 创建 和 使 用 在 你 的 代码 中 随处 可 见 。 你 款 少 的 是 根据 你 自己 的 意愿 
来 识别 、 拥 抱 和 影响 闭 包 的 思维 环境 。 


最 后 你 怖 然 大 悟 : 原来 在 我 的 代码 中 已 经 到 处 都 是 闭 包 了 ， 现 在 我 终于 能 理解 它们 了 。 理 
解 闭 包 就 好 像 Neo 第 一 次 见 到 矩阵 一 样 。 














r3 * 
5.2 实质 问题 
好 了 ， 和 夸张 和 浮夸 的 电影 比喻 已 经 够 多 了 。 
下 


当 函 数 可 以 记 住 并 访问 所 在 的 词法 作用 域 时 ， 就 产生 了 财 包 ， 即 使 函数 是 在 当前 词法 作用 
域 之 外 执行 。 














和 是 直接 了 当 的 定义 ， 你 需要 掌握 它 才能 理解 和 识别 闭 包 ， 








下 面 用 一 些 代码 来 解释 这 个 定义 。 











function foo() { 
var a = 2; 


function bar() { 
console.log( a ); // 2 
} 


bar(); 


foo(); 


iX Be CRUZ Eo FU E E For Bs DHCRARGRREL, A F SHE ARAARA, ERR 
bar() 可 以 访问 外 部 作用 域 中 的 变量 a (这 个 例子 中 的 是 一 个 RHS 引用 查询 )。 





这 是 闭 包 吗 ? 


技术 上 来 讲 ， 也 许 是 。 但 根据 前 面 的 定义 ， 确 切 地 说 并 不 是 。 我 认为 最 准确 地 用 来 解释 
bar 对 a 的 引用 的 方法 是 词法 作用 域 的 查找 规则 ， 而 这 些 规 则 只 是 闭 包 的 一 部 分 。( 但 却 
是 非常 重要 的 一 部 分 ! ) 








注 2: 《星球 大 战 》 系 列 电影 中 的 人 物 。 一 一 译 者 注 
注 3: 电影 《 骇 客 帝国 》 的 主角 。 一 一 译 者 注 
注 4: 电影 《 骇 客 帝国 》 中 拥有 自我 意识 主宰 一 切 的 超级 计算 机 。 一 一 译 者 注 
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从 纯 学 术 的 角度 说 ， 在 上 面 的 代码 片段 中 ， 函 数 bar O 具有 一 个 涵盖 foo() EHR E 
(事实 上 ,涵盖 了 它 能 访问 的 所 有 作用 域 ， 比 如 全 局 作用 域 )。 也 可 以 认为 baro 被 封闭 在 
了 foo() 的 作用 域 中 。 为 什么 呢 ? 原因 简单 明了 ， 因 为 bar() REE foo() 内 部 。 


但 是 通过 这 种 方式 定义 的 闭 包 并 不 能 直接 进行 观察 ， 也 无 法 明白 在 这 个 代码 片段 中 闭 包 是 
如 何 工 作 的 。 我 们 可 以 很 容易 地 理解 词法 作用 域 ， 而 闭 包 则 隐藏 在 代码 之 后 的 神秘 阴影 
里 ， 并 不 那么 容易 理解 。 











下 面 我 们 来 看 一 段 代 码 ， 清 晰 地 展示 了 闭 包 : 


function foo() { 
var a = 2; 


function bar() { 
console.log( a ); 


} 


return bar; 


j 


var baz - foo(); 
baz(); // 2 一 一 朋友 ， 这 就 是 闭 包 的 效果 。 


函数 bar() 的 词法 作用 域 能 够 访问 foo() 的 内 部 作用 域 。 然 后 我 们 将 baro 函数 本 身 当 作 
一 个 值 类 型 进行 传递 。 在 这 个 例子 中 ， 我 们 将 bar 所 引用 的 函数 对 和 象 本 身 当 作 返 回 值 。 


在 foo() 执行 后 ， 其 返回 值 (也 就 是 内 部 的 bar() 函数 ) 赋值 给 变量 baz 并 调用 baz()， 实 
际 上 只 是 通过 不 同 的 标识 符 引 用 调用 了 内 部 的 函数 bar()。 











bar() 显然 可 以 被 正常 执行 。 但 是 在 这 个 例子 中 ， 它 在 自己 定义 的 词法 作用 域 以 外 的 地 方 
执行 。 











在 foo() 执行 后 ， 通 常会 期 待 foo() 的 整个 内 部 作用 域 都 被 销毁 ， 因 为 我 们 知道 引擎 有 垃 
圾 回收 器 用 来 释放 不 再 使 用 的 内 存 空 间 。 由 于 看 上 去 fo) 的 内 容 不 会 再 被 使 用 ， 所 以 很 
自然 地 会 考虑 对 其 进行 回收 。 

















而 闭 包 的 “神奇 ”之 处 正 是 可 以 阻止 这 件 事情 的 发 生 。 事 实 上 内 部 作用 域 依然 存在 ， 因 此 
没有 被 回收 。 谁 在 使 用 这 个 内 部 作用 域 ? 原来 是 bar() 本 身 在 使 用 。 


拜 bar() 所 声明 的 位 置 所 赐 ， 它 拥有 涵盖 foo() 内 部 作用 域 的 闭 包 ， 使 得 该 作用 域 能 够 一 
直 存 活 ， 以 供 bar() 在 之 后 任何 时 间 进 行 引用 。 














bar) 依然 持 有 对 该 作用 域 的 引用 ， 而 这 个 引用 就 叫 作 闭 包 。 
因此 ， 在 几 微 秒 之 后 变量 baz 被 实际 调用 (调用 内 部 函数 bar) ， 不 出 意料 它 可 以 访问 定义 
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时 的 词法 作用 域 ， 因 此 它 也 可 以 如 预期 般 访问 变量 a。 





这 个 函数 在 定义 时 的 词法 作用 域 以 外 的 地 方 被 调用 。 闭 包 使 得 函数 可 以 继续 访问 定义 时 的 
词法 作用 域 。 


当然 ,无论 使 用 何 种 方式 对 函数 类 型 的 值 进行 传递 ， 当 函数 在 别处 被 调用 时 都 可 以 观察 到 
闭 包 。 


function foo() { 
var a = 2; 


function baz() { 
console.log( a ); // 2 
} 


bar( baz ); 
} 


function bar(fn) { 


fn(); // 妈妈 快 看 呀 ， 这 就 是 闭 包 |! 


把 内 部 函数 baz 传递 给 bar， 当 调用 这 个 内 部 函数 时 (现在 叫 作 fn)， 它 涵盖 的 foo() 内 部 
作用 域 的 闭 包 就 可 以 观察 到 了 ， 因 为 它 能 够 访问 a. 





传递 函数 当然 也 可 以 是 间接 的 。 
var fn; 


function foo() { 
var a = 2; 


function baz() { 
console.log( a ); 


} 


fn = baz; // 将 baz 分 配给 全 局 变量 
} 


function bar() { 
fnO; // 妈妈 快 看 川 ， 这 就 是 闲 包 ! 
} 


foo(); 
bar(); // 2 


无 论 通过 何 种 手段 将 内 部 函数 传递 到 所 在 的 词法 作用 域 以 外 ， 它 都 会 持 有 对 原始 定义 作用 
域 的 引用 ， 无 论 在 何 处 执行 这 个 函数 都 会 使 用 闭 包 。 








5.3 MERET 

前 面 的 代码 片段 有 点 死板 ， 并且 为 了 解释 如 何 使 用 闭 包 而 人 为 地 在 结构 上 进行 了 修饰 。 但 
我 保证 闭 包 绝 不 仅仅 是 一 个 好 玩 的 玩具 。 你 已 经 写 过 的 代码 中 一 定 到 处 都 是 闭 包 的 身影 。 
现在 让 我 们 来 搞 懂 这 个 事实 。 








function wait(message) { 
setTimeout( function timer() { 
console.log( message ); 
), 1000 ); 


j 


wait( "Hello, closure!" ); 


将 一 个 内 部 函数 (名 为 timer). 传递 给 setTimeout(..), timer 具有 涵盖 watt(..) 作用 域 
的 闭 包 ， 因 此 还 保有 对 变量 message 的 引用 。 








wait(..) 执行 1000 毫秒 后 ， 它 的 内 部 作用 域 并 不 会 消失 ，timer 函数 依然 保有 wait(..) 
作用 域 的 闭 包 。 


识 入 到 引擎 的 内 部 原理 中 ， 内 置 的 工具 国 数 setTimeout(..) 持 有 对 一 个 参数 的 引用 ， 这 个 
参数 也 许 叫 作 fn 或 者 func， 或 者 其 他 类 似 的 名 字 。 引 擎 会 调用 这 个 函数 ， 在 例子 中 就 是 
内 部 的 timer 函数 ， 而 词法 作用 域 在 这 个 过 程 中 保持 完整 。 






































或 者 ， 如 果 你 很 熟悉 jQuery (或 者 其 他 能 说 明 这 个 问题 的 JavaScript 框架 )， 可 以 思考 下 面 
的 代码 : 
function setupBot(name, selector) { 
$( selector ).click( function activator() { 
console.log( "Activating: " + name ); 


» 
} 


setupBot( "Closure Bot 1", "#bot_1" ); 
setupBot( "Closure Bot 2", "#bot 2" ); 


我 不 知道 你 会 写 什 么 样 的 代码 ， 但 是 我 写 的 代码 负责 控制 由 闭 包机 器 人 组 成 的 整个 全 球 无 
人 机 大 军 ， 这 是 完全 可 以 实现 的 ! 





玩笑 开 完了 ， 本 质 上 无 论 何 时 何 地 ， 如 果 将 函数 (访问 它们 各 自 的 词法 作用 域 ) 当 作 第 一 
级 的 值 类 型 并 到 处 传递 ， 你 就 会 看 到 闭 包 在 这 些 函 数 中 的 应 用 。 在 定时 器 、 事 件 监听 器 、 
Ajax 请 求 、 跨 窗口 通信 、Web Workers 或 者 任何 其 他 的 异步 (或 者 同步 ) 任务 中 ， 只 要 使 
用 了 回调 函数 ， 实 际 上 就 是 在 使 用 亲 包 ! 
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第 3 章 介绍 了 IIFE 模式 。 通 常 认为 IEE 是 典型 的 闭 包 例 子 ， 但 根据 先前 对 
闭 包 的 定义 ， 我 并 不 是 很 同意 这 个 观点 。 


var a = 2; 


(function IIFE() { 
console.log( a ); 


DO; 


虽然 这 段 代码 可 以 正常 工作 ,但 严格 来 讲 它 并 不 是 闭 包 。 为 什么 ?因为 函数 (示例 代码 中 
的 IIFE) 并 不 是 在 它 本 身 的 词法 作用 域 以 外 执行 的 。 它 在 定义 时 所 在 的 作用 域 中 执行 (而 
外 部 作用 域 ， 也 就 是 全 局 作用 域 也 持 有 a). a 是 通过 普通 的 词法 作用 域 查找 而 非 闭 包 被 发 
现 的 。 

尽管 技术 上 来 讲 ， 闭 包 是 发 生 在 定义 时 的 ， 但 并 不 非常 明显 ， 就 好 像 六 祖 匡 能 所 说 :“ 既 
非 风 动 ， 亦 非 幅 动 ， 仁 者 心动 耳 。”。 

尽管 IFE 本 身 并 不 是 观察 闭 包 的 恰当 例子 ， 但 它 的 确 创建 了 闭 包 ， 并 且 也 是 最 常用 来 创建 


可 以 被 封闭 起 来 的 闭 包 的 工具 。 因 此 IFE 的 确 同 闭 包 息息相关 ， 即 使 本 身 并 不 会 真 的 使 用 
闭 包 。 





亲爱 的 读者 ， 现 在 把 书 放 下 ， 我 有 一 个 任务 要 给 你 。 打 开 你 最 近 写 的 JavaScript 代码 ， 找 
到 其 中 的 函数 类 型 的 值 并 指出 哪里 已 经 使 用 了 闭 包 ， 即 使 你 以 前 可 能 并 不 知道 这 就 是 
闭 包 。 








HEPR FRE] 


5.4 循环 和 闭 包 
要 说 明 闭 包 ，for 循环 是 最 常见 的 例子 。 


for (var i-1; i«-5; i++) { 
setTimeout( function timer() ( 
console.log( i ); 
), i*1000 ); 
J 





iE S5: XJ it's a tree falling in the forest with no one around to hear it, [E]7x HABER AUS Z zy ményr x. Eb 
喻 客观 存在 和 观察 认 知 之 间 的 关系 。 译 者 注 
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由 于 很 多 开发 者 对 闭 包 的 概念 认识 得 并 不 是 很 清楚 ， 因 此 当 循 环 内 部 包含 函 
数 定 义 时 ， 代 码 格式 检查 器 经 常 发 出 警告 。 我 们 在 这 里 介绍 如 何 才能 正确 地 
使 用 闭 包 并 发 挥 它 的 威力 ， 但 是 代码 格式 检查 器 并 没有 那么 灵敏 ， 它 会 假设 
你 并 不 真正 了 解 自己 在 做 什么 ， 所 以 无 论 如 何 都 会 发 出 警告 。 


























正常 情况 下 ， 我 们 对 这 段 代码 行为 的 预期 是 分 别 输 出 数字 1-5， 每 秒 一 次 ， 每 次 一 个 。 
但 实际 上 ， 这 段 代码 在 运行 时 会 以 每 秒 一 次 的 频率 输出 五 次 6。 
这 是 为 什么 ? 


首先 解释 6 是 从 哪里 来 的 。 这 个 人 循环 的 终止 条 件 是 i 不 再 <=5。 条 件 首次 成 立时 的 值 是 
6。 因 此 ， 输 出 显示 的 是 循环 结束 时 i 的 最 终 值 。 
仔细 想 一 下 ， 这 好 像 又 是 显而易见 的 ， 延迟 函 数 的 回调 会 在 循环 结束 时 才 执 行 。 事 实 上 ， 


当 定 时 器 运行 时 即使 每 个 迭代 中 执行 的 是 setTimeout(..，0)， 所 有 的 回调 函数 依然 是 在 循 
环 结束 后 才 会 被 执行 ， 因 此 会 每 次 输出 一 个 6 出 来 。 




















这 里 引伸 出 一 个 更 深入 的 问题 ， 代 码 中 到 底 有 什么 缺陷 导致 它 的 行为 同 语义 所 暗示 的 不 一 
致 呢 ? 


缺陷 是 我 们 试图 假设 循环 中 的 每 个 选 代 在 运行 时 都 会 给 自己 “捕获 ”一 个 宇 的 副本 。 但 是 
根据 作用 域 的 工作 原理 ， 实 际 情况 是 尽管 循环 中 的 五 个 函数 是 在 各 个 迭代 中 分 别 定 义 的 ， 
但 是 它们 都 被 封闭 在 一 个 共享 的 全 局 作用 域 中 ， 因 此 实际 上 只 有 一 个 is 

这 样 说 的 话 ， 当 然 所 有 函数 共享 一 个 的 引用 。 循 环 结构 让 我 们 误 以 为 背后 还 有 更 复杂 的 

机 制 在 起 作用 ， 但 实际 上 没有 。 如 果 将 延迟 函数 的 回调 重复 定义 五 次 ， 完 全 不 使 用 循环 ， 
那 它 同 这 段 代 码 是 完全 等 价 的 。 


下 面 回 到 正题 。 缺 陷 是 什么 ?我们 需要 更 多 的 闲 包 作用 域 ， 特 别 是 在 循环 的 过 程 中 每 个 选 
代 都 需要 一 个 闭 包 作用 域 。 



































第 3 章 介 绍 过 ，IIFE 会 通过 声明 并 立即 执行 一 个 函数 来 创建 作用 域 。 


for (var i-1; i<=5; i++) { 
(function() { 
setTimeout( function timer() { 
console.log( i ); 
), i*1000 ); 
nO; 


这 样 能 行 吗 ? 试 试 吧 ， 我 等 着 你 。 
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我 不 卖 关 子 了 。 这 样 不 行 。 但 是 为 什么 呢 ? 我 们 现在 显然 拥有 更 多 的 词法 作用 域 了 。 的 确 
每 个 延迟 函数 都 会 将 IFE 在 每 次 欠 代 中 创建 的 作用 域 封闭 起 来 。 





如 果 作用 域 是 空 的 ， 那 么 仅仅 将 它们 进行 封闭 是 不 够 的 。 仔 细 看 一 下 ， 我 们 的 TIRE 只 是 一 
个 什么 都 没有 的 空 作用 域 。 它 需要 包含 一 点 实质 内 容 才 能 为 我 们 所 用 。 


它 需要 有 自己 的 变量 ， 用 来 在 每 个 迭代 中 储存 i 的 值 : 





for (var i-1; i<=5; i++) { 
(function() { 
var j= i; 
setTimeout( function timer() { 
console.log( j ); 
}, j*1000 ); 
DO; 


行 了 1 它 能 正常 工作 了 | 。 
可 以 对 这 段 代码 进行 一 些 改进 : 


for (var i-1; i<=5; i++) { 
(function(j) { 
setTimeout( function timer() { 
console.log( j ); 
), j*1000 ); 
DCi» 

















当然 ， 这 些 FE 也 不 过 就 是 函数 ， 因 此 我 们 可 以 将 i 传递 进去 ， 如 果 愿 意 的 话 可 以 将 变量 
名 定 为 了， 当然 也 可 以 还 叫 作 ii。 无 论 如 何 这 段 代 码 现在 可 以 工作 了 。 


在 选 代 内 使 用 IIEE 会 为 每 个 迭代 都 生成 一 个 新 的 作用 域 ， 使 得 延迟 国 数 的 回调 可 以 将 新 的 
作用 域 封 闲 在 每 个 迭代 内 部 ， 每 个 迭代 中 都 会 舍 有 一 个 具有 正确 值 的 变量 供 我 们 访问 。 


问题 解决 啦 ! 








重 返 块 作用 域 

仔细 思考 我 们 对 前 面 的 解决 方案 的 分 析 。 我 们 使 用 IIEE 在 每 次 迭代 时 都 创建 一 个 新 的 作用 
域 。 换 名 话说 ， 每 次 迭代 我 们 都 需要 一 个 块 作用 域 。 第 3 章 介绍 了 let 声明 ， 可 以 用 来 动 
持 块 作用 域 ， 并 且 在 这 个 块 作 用 域 中 声明 一 个 变量 。 





本 质 上 这 是 将 一 个 块 转换 成 一 个 可 以 被 关闭 的 作用 域 。 因 此 ， 下 面 这 些 看 起 来 很 酷 的 代码 
就 可 以 正常 运行 了 : 








for (var i-1; i«-5; i++) { 
let j = i; // 是 的 ， 闭 包 的 块 作用 域 ! 
setTimeout( function timer() { 
console.log( j ); 
), j*1000 ); 


但 是 ， 这 还 不 是 全 部 | (RH Bob Barker" 的 声音 说 道 ) for 循环 头 部 的 Vet 声明 还 会 有 一 
个 特殊 的 行为 。 这 个 行为 指出 变量 在 循环 过 程 中 不 止 被 声明 一 次 ， 每 炊 选 代 都 会 声明 。 随 
后 的 每 个 迭代 都 会 使 用 上 一 个 迭代 结束 时 的 值 来 初始 化 这 个 变量 。 





for (let i=1; i<=5; i++) { 
setTimeout( function timer() { 
console.log( i ); 
}, 1*1000 ); 
j 


很 酷 是 吧 ? 块 作用 域 和 闭 包 联 手 便 可 天 下 无 敌 。 不 知道 你 是 什么 情况 ， 反 正 这 个 功能 让 我 
成 为 了 一 名 快乐 的 JavaScript 程序 员 。 


5.5 ”模块 


还 有 其 他 的 代码 模式 利用 闲 包 的 强大 威力 ， 但 从 表面 上 看 ， 它 们 似乎 与 回调 无 关 。 下 面 
起 来 研究 其 中 最 强大 的 一 个 : 模块 。 

















l 








function foo() { 
var something = "cool"; 
var another = [1, 2, 3]; 


function doSomething() { 
console.log( something ); 


} 


function doAnother() { 
console.log( another.join( " ! " ) ); 
} 
} 


正如 在 这 段 代 码 中 所 看 到 的 ， 这 里 并 没有 明显 的 闭 包 ， 只 有 两 个 私有 数据 变量 something 
和 another， 以 及 doSomething() 和 doAnother() 两 个 内 部 国 数 ， 它 们 的 词法 作用 域 (而 这 
就 是 闭 包 ) 也 就 是 foo() 的 内 部 作用 域 。 


接 下 来 考虑 以 下 代码 : 








function CoolModule() { 
var something = "cool"; 











iE 6: Bob Barker 是 美国 著名 的 电视 节目 主持 人 。 一 一 译 者 注 
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var another - [1, 2, 3]; 


function doSomething() ( 
console.log( something ); 


j 


function doAnother() { 
console.log( another.join( " ! " ) ); 


j 


return { 
doSomething: doSomething, 
doAnother: doAnother 


E 
} 


var foo = CoolModule(); 


foo.doSomething(); // cool 
foo.doAnother(); // 1! 2 ! 3 


这 个 模式 在 JavaScript 中 被 称 为 模块 。 最 常见 的 实现 模块 模式 的 方法 通常 被 称 为 模块 暴露 ， 
这 里 展示 的 是 其 变 体 。 





我 们 仔细 研究 一 下 这 些 代码 。 


首先 ，CoolModule() 只 是 一 个 国 数 ， 必 须要 通过 调用 它 来 创建 一 个 模块 实例 。 如 果 不 执行 
外 部 函数 ， 内 部 作用 域 和 闭 包 都 无 法 被 创建 。 











其 次 ，CoolModule() 返回 一 个 用 对 象 字面 量 语法 { key: value, ... 】} 来 表示 的 对 象 。 这 
个 返回 的 对 象 中 含有 对 内 部 函数 而 不 是 内 部 数据 变量 的 引用 。 我 们 保持 内 部 数据 变量 是 隐 
藏 且 私 有 的 状态 。 可 以 将 这 个 对 象 类 型 的 返回 值 看 作 本 质 上 是 模块 的 公共 API 








这 个 对 象 类 型 的 返回 值 最 终 被 赋值 给 外 部 的 变量 foo， 然 后 就 可 以 通过 它 来 访问 API 中 的 
属性 方法 ， 比 如 foo.doSomething()。 


从 模块 中 返回 一 个 实际 的 对 象 并 不 是 必须 的 ， 也 可 以 直接 返回 一 个 内 部 函 
数 。jQuery 就 是 一 个 很 好 的 例子 。jQuery 和 $ 标识 符 就 是 jQuery 模块 的 公 
Jk API， 但 它们 本 身 都 是 函数 (由 于 函数 也 是 对 象 ， 它 们 本 身 也 可 以 拥有 属 
性 )。 





doSomething() 和 doAnother() 函数 具有 涵盖 模块 实例 内 部 作用 域 的 闭 包 (通过 调用 
CoolModule() 实现 )。 当 通过 返回 一 个 含有 属性 引用 的 对 象 的 方式 来 将 函数 传递 到 词法 作 
用 域外 部 时 ， 我 们 已 经 创造 了 可 以 观察 和 实践 闭 包 的 条 件 。 


如 有 果 要 更 简单 的 描述 ， 模 块 模式 需要 具备 两 个 必要 条 件 。 
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1. 必须 有 外 部 的 封闭 函数 ， 该 函数 必须 至 少 被 调用 一 次 (每 次 调用 都 会 创建 一 个 新 的 模块 


实例 )。 


2. 封闭 函数 必须 返回 至 少 一 个 内 部 函数 ， 这 样 内 部 函数 才能 在 私有 作用 域 中 形成 团 包 ， 并 








且 可 以 访问 或 者 修改 私有 的 状态 。 





一 个 具有 函数 属性 的 对 象 本 身 并 不 是 真正 的 模块 。 从 方便 观察 的 角度 看 ， 一 个 从 函数 调用 





所 返回 的 ， 只 有 数据 属性 而 没有 闭 包 函 数 的 对 象 并 不 是 真正 的 模块 。 








上 一 个 示例 代码 中 有 一 个 叫 作 CoolModule() 的 独立 的 模块 创建 右 ， 可 以 被 调用 任意 多 次 ， 
每 次 调用 都 会 创建 一 个 新 的 模块 实例 。 当 只 需要 一 个 实例 时 ， 可 以 对 这 个 模式 进行 简单 的 








改进 来 实现 单 例 模式 ， 


var foo = (function CoolModule() { 
var something - "cool"; 
var another - [1, 2, 3]; 


function doSomething() ( 
console.log( something ); 
} 


function doAnother() { 
console.log( another.join( " ! " ) ); 
} 


return { 
doSomething: doSomething, 
doAnother: doAnother 
J; 
DO; 


foo.doSomething(); // cool 
foo.doAnother(); // 1! 2 ! 3 





bi 


我 们 将 模块 函数 转换 成 了 IIFE (参见 第 3 章 )， 立 即 调用 这 个 函数 并 将 
单 例 的 模块 实例 标识 符 foo, 


模块 也 是 普通 的 函数 ， 因 此 可 以 接受 参数 : 


function CoolModule(id) { 
function identify() { 
console.log( id ); 

} 


return { 
identify: identify 
J; 
} 


CoolModule( "foo 1" ); 
CoolModule( "foo 2" ); 


var fooi 
var foo2 


回 值 直接 赋值 给 


Z^ 
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fooi.identify(); // "foo 1" 
foo2.identify(); // "foo 2" 


模块 模式 另 一 个 简单 但 强大 的 变化 用 法 是 ， 命 名 将 要 作为 公共 API 返回 的 对 象 : 


var foo = (function CoolModule(id) { 
function change() { 
// 修改 公共 API 
publicAPI.identify = identify2; 
} 














function identify1() { 
console.log( id ); 


} 


function identify2() { 
console.log( id.toUpperCase() ); 


j 


var publicAPI = { 
change: change, 
identify: identify1 
E 


return publicAPI; 
"foo module" ); 


n 


一 


foo.identify(); // foo module 
foo.change(); 
foo.identify(); // FOO MODULE 


通过 在 模块 实例 的 内 部 保留 对 公共 API 对 象 的 内 部 引用 ， 可 以 从 内 部 对 模块 实例 进行 修 
改 ， 包 括 添加 或 删除 方法 和 属性 ， 以 及 修改 它们 的 值 。 


5.5.1. 现代 的 模块 机 制 
大 多 数 模块 依赖 加 载 器 /管理 器 本 质 上 都 是 将 这 种 模块 定义 封装 进 一 个 友好 的 API。 这 里 
并 不 会 研究 某 个 具体 的 库 ， 为 了 宏观 了 解 我 会 简单 地 介绍 一 些 核心 概念 : 





var MyModules = (function Manager() { 
var modules = {}; 


function define(name, deps, impl) { 
for (var i=0; i«deps.length; i++) { 
deps[i] = modules[deps[i]]; 


modules[name] = impl.apply( impl, deps ); 
J 


function get(name) { 
return modules[name]; 


j 
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邮 


return { 
define: define, 
get: get 


Je 
DO; 
这 段 代 码 的 核心 是 modules[name] = impL.appLy(impL，deps)。 为 了 模块 的 定义 引入 了 包装 


函数 (可 以 传 入 任何 依赖 )， 并 且 将 返回 值 ， 也 就 是 模块 的 API， 储 存在 一 个 根据 名 字 来 管 
理 的 模块 列表 中 。 





7 








下 面 展示 了 如 何 使 用 它 来 定义 模块 : 





MyModules.define( "bar", [], function() { 
function hello(who) { 


return "Let me introduce: " + who; 
return { 
hello: hello 
IE 
5 


MyModules.define( "foo", ["bar"], function(bar) { 
var hungry = "hippo"; 


function awesome() { 
console.log( bar.hello( hungry ).toUpperCase() ); 
} 


return { 
awesome: awesome 
js 
HO 


var bar 
var foo 


MyModules.get( "bar" ); 
MyModules.get( "foo" ); 


console.log( 
bar.hello( "hippo" ) 
); // Let me introduce: hippo 


foo.awesome(); // LET ME INTRODUCE: HIPPO 


"foo" 和 "bar" 模块 都 是 通过 一 个 返回 公共 API 的 函数 来 定义 的 。"foo" 甚至 接受 "bar" 的 
示例 作为 依赖 参数 ， 并 能 相应 地 使 用 它 。 








为 我 们 自己 着 想 ， 应 该 多 花 一 点 时 间 来 研究 这 些 示例 代码 并 完全 理解 困 包 的 作用 吧 。 最 重 
要 的 是 要 理解 模块 管理 器 没有 任何 特殊 的 “魔力 。 它 们 符合 前 面 列 出 的 模块 模式 的 两 个 
特点 : 为 函数 定义 引入 包装 函数 ， 并 保证 它 的 返回 值 和 模块 的 API 保持 一 致 。 


换 名 话说 ， 模 块 就 是 模块 ， 即 使 在 它们 外 层 加 上 一 个 友好 的 包装 工具 也 不 会 发 生 任何 变化 。 
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5.5.2 ”未 来 的 模块 机 制 

ES6 中 为 模块 增加 了 一 级 语法 支持 。 但 通过 模块 系统 进行 加 载 时 ，ES6 会 将 文件 当 作 独立 
的 模块 来 处 理 。 每 个 模块 都 可 以 导入 其 他 模块 或 特定 的 API 成 员 ， 同 样 也 可 以 导出 自己 的 
API 成 员 。 











基于 函数 的 模块 并 不 是 一 个 能 被 稳定 识别 的 模式 (编译 器 无 法 识别 ) ， 它 们 
的 AP 语义 只 有 在 运行 时 才 会 被 考虑 进来 。 因 此 可 以 在 运行 时 修改 一 个 模块 
的 API (参考 前 面 关于 公共 API 的 讨论 )。 














相 比 之 下 ，ES6 模块 API 更 加 稳定 (API 不 会 在 运行 时 改变 ) 。 由 于 编辑 器 知 
道 这 一 点 ， 因 此 可 以 在 〈 的 确 也 这 样 做 了 ) 编译 期 检查 对 导入 模块 的 API 成 
员 的 引用 是 否 真实 存在 。 如 果 API 引用 并 不 存在 ， 编 译 器 会 在 运行 时 抛 出 一 
个 或 多 个 “早期 ”错误 ， 而 不 会 像 往常 一 样 在 运行 期 采用 动态 的 解决 方案 。 
























































ES6 的 模块 没有 “行内 ”格式 ， 必 须 被 定义 在 独立 的 文件 中 (一 个 文件 一 个 模块 )。 浏 览 
器 或 引擎 有 一 个 默认 的 “模块 加 载 器 ”(〈 可 以 被 重 载 ， 但 这 远 超 出 了 我 们 的 讨论 范围 ) 可 
以 在 导入 模块 时 异步 地 加 载 模块 文件 。 


考虑 以 下 代码 : 








bar.js 
function hello(who) { 
return "Let me introduce: " + who; 


j 


export hello; 
foo.js 


// UA "bar" 模块 导入 hello() 


import hello from "bar"; 
var hungry = "hippo"; 
function awesome() { 
console.log( 
hello( hungry ).toUpperCase() 
); 
} 


export awesome; 
baz.js 


// 导入 完整 的 "foo" 和 "bar" 模块 
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module foo from "foo"; 
module bar from "bar"; 


console.log( 
bar.hello( "rhino" ) 
); // Let me introduce: rhino 


foo.awesome(); // LET ME INTRODUCE: HIPPO 


需要 用 前 面 两 个 代码 片段 中 的 内 容 分 别 创建 文件 foo.js 和 bar.js。 然 后 如 第 三 
个 代码 片段 中 展示 的 那样 ，bar.js 中 的 程序 会 加 载 或 导入 这 两 个 模块 并 使 用 
它们 。 








import 可 以 将 一 个 模块 中 的 一 个 或 多 个 API 导入 到 当前 作用 域 中 ， 并 分 别 绑 定 在 一 个 变量 
上 (在 我 们 的 例子 里 是 hello), module 会 将 整个 模块 的 API 导入 并 绑 定 到 一 个 变量 上 (在 
我 们 的 例子 里 是 foo 和 bar), export 会 将 当前 模块 的 一 个 标识 符 (变量 、 函 数 ) 导出 为 公 
共 API。 这 些 操作 可 以 在 模块 定义 中 根据 需要 使 用 任意 多 次 。 


模块 文件 中 的 内 容 会 被 当 作 好 像 包含 在 作用 域 闭 包 中 一 样 来 处 理 ， 就 和 前 面 介绍 的 函数 闭 
包 模 块 一 样 。 











5.6 小结 


闭 包 就 好 像 从 JavaScript 中 分 离 出 来 的 一 个 充满 神秘 色彩 的 未 开化 世界 ， 只 有 最 勇敢 的 人 
才能 够 到 达 那 里 。 但 实际 上 它 只 是 一 个 标准 ， 显 然 就 是 关于 如 何在 国 数 作为 值 按 需 传递 的 
词法 环境 中 书写 代码 的 。 


当 函 数 可 以 记 住 并 访问 所 在 的 词法 作用 域 ， 即 使 浮 数 是 在 当前 词法 作用 域 之 外 执行 ， 这 时 
就 产生 了 闭 包 。 





如 果 没 能 认 出 闭 包 ， 也 不 了 解 它 的 工作 原理 ， 在 使 用 它 的 过 程 中 就 很 容易 犯错 ， 比 如 在 循 
环 中 。 但 同时 闭 包 也 是 一 个 非常 强大 的 工具 ， 可 以 用 多 种 形式 来 实现 模块 等 模式 。 


模块 有 两 个 主要 特征 : (0) 为 创建 内 部 作用 域 而 调用 了 一 个 包装 函数 ，(2) 包装 函数 的 返回 
值 必 须 至 少 包 括 一 个 对 内 部 函数 的 引用 ， 这 样 就 会 创建 涵盖 整个 包装 函数 内 部 作用 域 的 闭 
包 。 








现在 我 们 会 发 现代 码 中 到 处 都 有 闭 包 存在 ， 并 且 我 们 能 够 识别 财 包 然后 用 它 来 做 一 些 有 用 
的 事 ! 
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附录 人 








动态 作用 域 


在 第 2 章 中 ,我们 对 比 了 动态 作用 域 和 词法 作用 域 模型 ，JavaScript 中 的 作用 域 就 是 词法 





作用 域 (事实 上 大 部 分 语言 都 是 基于 词法 作用 域 的 )。 


我 们 会 简要 地 分 析 一 下 动态 作 


用 域 ， 重 申 它 与 词法 作用 域 的 区 别 。 但 实际 上 动态 作用 域 是 


JavaScript 另 一 个 重要 机 制 this 的 表亲 ， 本 书 第 二 部 分 “this 和 对 象 原 型 ”中 会 有 详细 


介绍 。 








从 第 2 章 中 可 知 ， 词 法 作用 域 是 一 套 关 于 引擎 如 何 寻找 变量 以 及 会 在 何 处 找到 变量 的 规 


则 。 词 法 作用 域 最 重要 的 特 和 
eval() gk with), 








E 是 它 的 定义 过 程 发 生 在 代码 的 书写 阶段 (假设 你 没有 使 用 




















动态 作用 域 似乎 暗示 有 很 好 的 


理由 让 作用 域 作为 一 个 在 运行 时 就 被 动态 确定 的 形式 ， 而 不 





是 在 写 代 码 时 进行 静态 确定 的 形式 ， 事 实 上 也 是 这 样 的 。 我 们 通过 示例 代码 来 说 明 : 


function foo() { 
console.log( a ); // 
} 
function bar() { 
var a = 3; 
foo(); 
} 


var a = 2; 


bar(); 


2 


词法 作用 域 让 foo() 中 的 a 通过 RHS 引用 到 了 全 局 作用 域 中 的 a， 因 此 会 输出 2. 
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而 动态 作用 域 并 不 关心 函数 和 作用 域 是 如 何 声明 以 及 在 何 处 声明 的 ， 只 关心 它们 从 何 处 调 
用 。 换 句 话 说， 作用 域 链 是 基于 调用 栈 的 ， 而 不 是 代码 中 的 作用 域 舱 套 。 


因此 ， 如 果 JavaScript 具有 动态 作用 域 ， 理 论 上 ， 下 面 代码 中 的 foo() 在 执行 时 将 会 输出 3。 


function foo() { 
console.log( a ); // 3 (不 是 21 ) 
} 


function bar() { 
var a = 3; 
foo(); 

} 


var a = 2; 
bar(); 
为 什么 会 这 样 ? 因为 当 foo() 无 法 找到 a 的 变量 引用 时 ， 会 顺 着 调用 栈 在 调用 foo() 的 地 


方 查 找 a， 而 不 是 在 艇 套 的 词法 作用 域 链 中 向 上 查找 。 由 于 foo() 是 在 bar() 中 调用 的 ， 
引擎 会 检查 bar() 的 作用 域 ， 并 在 其 中 找到 值 为 3 的 变量 a. 


很 奇怪 吧 ? 现在 你 可 能 会 这 么 想 。 








但 这 其 实 是 因为 你 可 能 只 写 过 基于 词法 作用 域 的 代码 (或 者 至 少 以 词法 作用 域 为 基础 进行 
了 深入 的 思 萎 )， 因 此 对 动态 作用 域 感 到 陌生 。 如 果 你 只 用 基于 动态 作用 域 的 语言 写 过 代 
码 ， 就 会 觉得 这 是 很 自然 的 ， 而 词法 作用 域 看 上 去 才 怪 怪 的 。 


需要 明确 的 是 ， 事 实 上 JavaScript 并 不 具有 动态 作用 域 。 它 只 有 词法 作用 域 ， 简 单 明 了 。 
但 是 this 机 制 某 种 程度 上 很 像 动态 作用 域 。 

主要 区 别 : 词法 作用 域 是 在 写 代 码 或 者 说 定义 时 确定 的 ， 而 动态 作用 域 是 在 运行 时 确定 
的 。(this 也 是 ! ) 词法 作用 域 关注 函数 在 何 处 声明 ， 而 动态 作用 域 关 注 函 数 从 何 处 调用 。 








最 后 ，this 关注 函数 如 何 调用 ， 这 就 表明 了 this 机 制 和 动态 作用 域 之 间 的 关系 多 么 紧密 。 
如 果 想 了 解 更 多 关于 this 的 详细 内 容 ， 参 见 本 书 第 二 部 分 “this 和 对 象 原型 。 
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附录 B 





块 作用 域 的 蔡 代 方案 


第 3 ERAM THEHR., EPMA ES3 发 布 以 来 ，JavaScript 中 就 有 了 块 作 用 域 ， 而 


with 和 | catch 分 句 就 是 块 作用 域 的 两 个 小 例子 。 


但 随 着 ES6 中 引入 了 Let， 我 们 的 代码 终于 有 了 创建 完整 、 不 受 约束 的 块 作用 域 的 能 


块 作 用 域 在 功能 上 和 代码 风格 上 都 拥有 很 多 激动 人 心 的 新 特性 。 
但 如 果 我 们 想 在 ES6 之 前 的 环境 中 使 用 块 作用 域 呢 ? 

















考虑 下 面 的 代码 : 


{ 
let a= 2; 
console.log( a ); // 2 
} 


console.log( a ); // ReferenceError 


这 段 代 码 在 ES6 环境 中 可 以 正常 工作 。 但 是 在 ES6 之 前 的 环境 中 如 何 才 能 实现 
答案 是 使 用 catch。 





try(throw 2;}catch(a){ 
console.log( a ); // 2 
} 


console.log( a ); // ReferenceError 




















这 个 效果 ? 


XU) 这 些 代 码 既 丑陋 又 奇怪 。 我 们 看 见 一 个 会 强制 抛 出 错误 的 try/catch， 但 是 它 抛 出 
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的 错误 就 是 一 个 值 2， 然 后 catch 分 句 中 的 变量 声明 会 接收 到 这 个 值 。 头 疼 ! 
没 错 ，catch 分 句 具 有 块 作用 域 ， 因 此 它 可 以 在 ES6 之 前 的 环境 中 作为 块 作用 域 的 替代 


方案 。 
“但 是 ,” 你 可 能 会 说 ,“ 鬼 才 要 写 这 么 丑陋 的 代码 ! ” 没 错 ， 没 人 写 的 代码 像 CoffeeScript 
编译 器 输出 的 代码 ， 但 这 不 是 重点 。 











重点 是 工具 可 以 将 ES6 的 代码 转换 成 能 在 ES6 之 前 环境 中 运行 的 形式 。 你 可 以 使 用 块 作用 
域 来 写 代 码 ， 并 享受 它 带 来 的 好 处 ， 然 后 在 构建 时 通过 工具 来 对 代码 进行 预 处 理 ， 使 之 可 
以 在 部 署 时 正常 工作 。 

事实 上 ， 这 是 向 ES6 中 的 所 有 (好 吧 ， 不 是 所 有 而 是 大 部 分 ) 功能 迁移 的 首选 方式 : 在 从 
ES6 之 前 的 环境 向 ESO 过 渡 时 ， 使 用 代码 转换 工具 来 对 ES6 代码 进行 处 理 ， 生 成 兼容 ES5 
的 代码 。 


























B.1 Traceur 


Google 维护 着 一 个 名 为 Traceur 的 项 目 ， 该 项 目 正 是 用 来 将 ES6 代码 转换 成 兼容 ES6 之 前 
的 环境 (大 部 分 是 ES5， 但 不 是 全 部 )。TC39 委员 会 依赖 这 个 工具 (也 有 其 他 工具 ) 来 测 
试 他 们 指定 的 语义 化 相关 的 功能 。 


Traceur 会 将 我 们 的 代码 片段 转换 成 什么 样子 ? 你 能 猜 到 的 ! 








{ 
try ( 
throw undefined; 
) catch (a) { 
az2; 
console.log( a ); 
} 
} 


console.log( a ); 


TEER, ET D T LUE BH TE JEHINE 7656575 18. HU P 6r ie ti ES6 环境 ， 
因为 try/catch 从 ES3 开始 就 在 在 了 〈 并 且 一 直 是 这 样 工作 的 )。 


B2 ，” 隐 式 和 显 式 作用 域 


在 第 3 章 中 介绍 块 作用 域 时 ， 我 们 的 代码 有 一 些 可 维护 性 和 可 扩展 性 方面 的 缺陷 。 有 没有 
其 他 可 以 使 用 块 作用 域 ， 并 且 还 能 避免 这 种 缺陷 的 途径 ? 
































考虑 下 面 这 种 let 的 使 用 方法 ， 它 被 称 作 Vet 作用 域 或 let 声明 (对 比 前 面 的 Vet 定义 ) 。 
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let (a = 2) { 
console.log( a ); // 2 
} 


console. log( a ); // ReferenceError 


同 隐 式 地 支持 一 个 已 经 存在 的 作用 域 不 同 ，let 声明 会 创建 一 个 显示 的 作用 域 并 与 其 进行 
绑 定 。 显 式 作用 域 不 仅 更 加 突出 ， 在 代码 重 构 时 也 表现 得 更 加 健壮 。 在 语法 上 ， 通 过 强制 
性 地 将 所 有 变量 声明 提升 到 块 的 顶部 来 产生 更 简洁 的 代码 。 这 样 更 容易 判断 变量 是 否 属于 
某 个 作用 域 。 

这 种 模式 同 很 多 人 在 函数 作用 域 中 手动 将 var 声明 提升 到 函数 顶部 的 方式 很 接近 。let 声 
明 有 意 将 变量 声明 放 在 块 的 顶部 ， 如 果 你 并 没有 到 处 使 用 let 定义， 那么 你 的 块 作用 域 就 
很 容易 辨识 和 维护 。 











但 是 这 里 有 一 个 小 问题 ，let 声明 并 不 包含 在 ES6 中 。 官 方 的 Traceur 编译 器 也 不 接受 这 
种 形式 的 代码 。 


我 们 有 两 个 选择 ， 使 用 合法 的 ES6 语法 并 且 在 代码 规范 性 上 做 一 些 尼 协 。 





[*let*/ ( let a = 2; 
console.log( a ); 


j 


console.log( a ); // ReferenceError 








工具 就 是 用 来 解决 问题 的 。 因 此 另外 一 个 选择 就 是 编写 显 式 let 声明， 然后 通过 工具 将 其 
转换 成 合法 的 、 可 以 工作 的 代码 。 


因此 我 开发 了 一 个 名 为 let-er 的 工具 来 解决 这 个 问题 。let-er 是 一 个 构建 时 的 代码 转换 器 ， 
但 它 唯 一 的 作用 就 是 找到 Vet 声明 并 对 其 进行 转换 。 它 不 会 处 理 包括 Vet 定义 在 内 的 任何 
其 他 代码 。 你 可 以 安全 地 将 leter 应 用 在 ES6 代码 转换 的 第 一 步 ， 如 果 有 必要 ， 接 下 来 也 
可 以 把 代码 传递 给 Traceur 等 工具 。 




















此 外 ，let-er 还 有 一 个 设置 项 --es6， 开 启 它 (默认 是 关闭 的 ) 会 改变 生成 代码 的 种 类 。 开 
启 这 个 设置 项 时 let-er 会 生成 完全 标准 的 ES6 代码 ， 而 不 会 生成 通过 try/catch 进行 hack 
的 ES3 替代 方案 : 





{ 
let a= 2; 
console.log( a ); 


j 


console.log( a ); // ReferenceError 


因此 你 马上 就 可 以 在 ES6 之 前 的 所 有 环境 中 使 用 leter， 当 你 只 关注 ES6 环境 时 ， 可 以 开 
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启 设置 项 ， 这 样 就 会 生成 标准 的 ES6 代码 。 
更 重要 的 ， 你 甚至 可 以 使 用 尚未 成 为 ES 官方 标准 的 、 更 加 好 用 的 显 式 Let 声明 。 
B.3 性 能 


最 后 简单 地 看 一 下 try/catch 带 来 的 性 能 问题 ， 并 尝试 回答 “为 什么 不 直接 使 用 IFE 来 创 
建 作用 域 ” 这 个 问题 。 





首先 ，try/catch 的 性 能 的 确 很 糟糕 ,但 技术 层面 上 没有 合理 的 理由 来 说 明 try/catch 必 
须 这 么 慢 ， 或 者 会 一 直 慢 下 去 。 自 从 TC39 支持 在 ES6 的 转换 器 中 使 用 try/catch 后 ， 
Traceur 团队 已 经 要 求 Chrome 对 try/catch 的 性 能 进行 改进 ， 他 们 显然 有 很 充分 的 动机 来 
做 这 件 事情 。 

Hk, IFE 和 try/catch 并 不 是 完全 等 价 的 ， 因 为 如 果 将 一 段 代 码 中 的 任意 一 部 分 拿 出 来 
用 函数 进行 包 右 ， 会 改变 这 段 代码 的 含义 ， 其 中 的 this, return, break 和 contine 都 会 
发 生变 化 。IIFE 并 不 是 一 个 普 适 的 解决 方案 ， 它 只 适合 在 某 些 情况 下 进行 手动 操作 。 











最 后 问题 就 变 成 了 : 你 是 否 想 要 块 作用 域 ?如 果 你 想 要 ， 这 些 工具 就 可 以 帮助 你 。 如 果 不 
想 要 ， 继 续 使 用 var 来 写 代码 就 好 了 ! 
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Mi R C 
this 词 法 





尽管 这 个 标题 没有 详细 说 明 this 机 制 ， 但 是 ES6 中 有 一 个 主题 用 非常 重要 的 方式 将 this 
同 词法 作用 域 联系 起 来 了 ， 我 们 会 简单 地 讨论 一 下 。 


ES6 添加 了 一 个 特殊 的 语法 形式 用 于 函数 声明 ， 叫 作 蘑 关 函 数 。 它 看 起 来 是 下 面 这 样 的 : 





var foo = a => { 
console. log( a ); 


IE 
foo( 2 ); // 2 


这 里 称 作 “ 胖 稍 头 ”的 写法 通常 被 当 作 单调 乏味 且 宛 长 Gu) 的 function 关键 字 的 简写 。 





但 是 稍 头 函数 除了 让 你 在 声明 函数 时 少 敲 几 次 键盘 以 外 ， 还 有 更 重要 的 作用 。 简 单 来 说 ， 
下 面 的 代码 有 问题 : 





F) 











var obj = { 
id: "awesome", 
cool: function coolFn() { 
console.log( this.id ); 
} 
E 


var id - "not awesome" 


obj.cool(); // NHÀ 


setTimeout( obj.cool, 100 ); // 不 酷 
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问题 在 于 cool C) 国 数 丢失 了 同 this 之 间 的 绑 定 。 解 决 这 个 问题 有 好 几 种 办 法 ， 但 最 长 用 
的 就 是 var self = 


使 用 起 来 如 下 所 示 


this;, 
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var obj = { 
count: 0, 
cool: function coolFn() { 
var self = this; 


if (self.count < 1) { 
setTimeout( function timer(){ 
self.count++; 
console. log( "awesome?" ); 
), 100 ); 
} 
J 
E 


obj.cool(); // 酷 吧 ? 

















var self = this 这 种 解决 方案 圆满 解决 了 理解 和 正确 使 用 this 绑 定 的 问题 ， 并 且 没 有 把 
问题 过 于 复杂 化 ， 它 使 用 的 是 我 们 非常 熟悉 的 工具 : 词法 作用 域 。self 只 是 一 个 可 以 通过 
词法 作用 域 和 闭 包 进行 引用 的 标识 符 ， 不 关心 this 绑 定 的 过 程 中 发 生 了 什么 。 


























人 们 不 喜欢 写 元 长 的 东西 ， 尤 其 是 一 过 又 一 遍地 写 。 因 此 ES6 的 一 个 初 囊 就 是 帮助 人 们 减 
少 重复 的 场景 ， 事 实 上 包括 修复 某 些 习 惯用 法 的 问题 ，this 就 是 其 中 一 个 。 





ES6 中 的 箭头 国 数 引 入 了 一 个 叫 作 this 词法 的 行为 : 


var obj = ( 
count: 0, 
cool: function coolFn() { 
if (this.count « 1) ( 
setTimeout( () => ( // 箭头 国 数 是 什么 鬼 东 西 ? 
this.count++; 
console.log( "awesome?" ); 
}, 100 ); 
} 
J 
IE 


obj.cool(); // 很 酷 吧 ? 
简单 来 说 ， 箭 头 国 数 在 涉及 this 绑 定 时 的 行为 和 普通 国 数 的 行为 完全 不 一 致 。 它 放弃 了 所 
有 普通 this 绑 定 的 规则 ， 取 而 代 之 的 是 用 当前 的 词法 作用 域 履 盖 了 this 本 来 的 值 。 








因此 ， 这 个 代码 片段 中 的 箭头 函数 并 非 是 以 某 种 不 可 预测 的 方式 同 所 属 的 this 进行 了 解 绑 
定 ， 而 只 是 “继承 ”了 coolO) 函数 的 this 绑 定 〈 因 此 调用 它 并 不 会 出 错 ) 。 











this 词 法 | 65 


这 样 除了 可 以 少 写 一 些 代 码 ， 我 认为 箭头 函数 将 程序 员 们 经 常 犯 的 一 个 错误 给 标准 化 了 ， 
也 就 是 混淆 了 this 绑 定 规则 和 词法 作用 域 规 则 。 

换 名 话说 : 为 什么 要 自 找 麻 烦 使 用 this 风格 的 代码 模式 呢 ? 把 它 和 词法 作用 域 结合 在 一 起 
非常 让 人 头疼 。 在 代码 中 使 用 两 种 风格 其 中 的 一 种 是 非常 自然 的 事情 ， 但 是 不 要 将 两 种 风 
格 混 在 一 起 使 用 。 














另 一 个 导致 第 头 函数 不 够 理想 的 原因 是 它们 是 匿名 而 非 具 名 的 。 具 名 函数 比 
匿名 函数 更 可 取 的 原因 参见 第 3 章 。 

















在 我 看 来 ， 解 决 这 个 “问题 ”的 另 一 个 更 合适 的 办 法 是 正确 使 用 和 包含 this 机 制 。 


var obj = ( 
count: 0, 
cool: function coolFn() ( 
if (this.count « 1) ( 
setTimeout( function timer()( 
this.count++; // this 是 安全 的 
// WI bind(..) 
console.log( "more awesome" ); 
J.bind( this ), 100 ); // look, bind()! 
} 
} 
E 


obj.cool(); // 更 酷 了 。 


无 论 你 是 喜欢 箭头 国 数 中 this 词法 的 新 行为 模式 ， 还 是 喜欢 更 靠得住 的 bind()， 都 需要 
注意 箭头 函数 不 仅仅 意味 着 可 以 少 写 代码 。 














它们 之 间 有 意 为 之 的 不 同行 为 需要 我 们 理解 和 掌握 ， 才 能 正确 地 使 用 它们 。 





现在 我 们 已 经 完全 理解 了 词法 作用 域 (还 有 闭 包 )， 理 解 this 词法 是 小 菜 一 碟 ! 
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感谢 社区 中 的 所 有 人 ， 包 括 TC39 委员 会 的 成 员 ， 他 们 分 享 了 许多 知识 并 且 一 直 耐 心 而 且 
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第 二 部 分 





this 和 对 有 象 原型 


[Æ] Kyle Simpson # 
NE 





读 这 本 书 准备 作 序 的 时 候 ， 我 不 禁 想 起 15 年 前 学 习 JavaScript 时 的 情景 。 过 去 的 这 15 年 
中 ， 我 一 直 用 它 进 行 编程 和 开发 ， 同 时 ，JavaScript 也 在 不 断 发 生变 化 。 








15 年 前 我 刚 开 始 使 用 JavaScript 时 ， 在 网 页 中 使 用 CSS 和 JavaScript 等 非 HTML 技术 被 称 
为 DHTML 或 者 动态 HTML。 在 那 之 后 ，JavaScript 的 用 途 发 生 了 巨大 的 变化 ， 印 象 中 主要 
用 于 给 网 页 添加 动态 雪花 或 者 在 状态 栏 中 添加 动态 时 钟 。 说 实话 ， 职 业 生 涯 的 早期 我 并 没 
有 对 JavaScript 给 予 足 够 的 重视 ， 因 为 在 我 看 来 它 主 要 的 功能 就 是 编写 一 些 有 趣 的 小 东西 。 











直到 2005 年 我 才 第 一 次 认识 到 JavaScript 是 一 门 真正 的 编程 语言 ， 应 当 受 到 我 的 重视 。 仔 
细 研 究 了 谷歌 地 图 的 第 一 个 测试 版 本 之 后 ， 我 被 它 的 潜力 深 深 地 吸引 住 了 。 在 那 时 ， 众 歌 
地 图 是 一 个 史无前例 的 应 用 一 一 你 可 以 用 鼠标 移动 和 缩放 地 图 ， 并 且 可 以 在 不 重 载 页 面 的 
情况 下 发 起 服务 器 请 求 一 一 这 些 全 部 用 JavaScript 完成 ， 简 直 就 像 魔法 一 样 ! 
如 果 某 些 事情 对 你 来 说 像 魔法 一 样 ， 那 意味 着 你 看 到 了 新 生 事物 的 明光。 我 的 想法 是 正确 
的 一 一 今天 ， 无 论 在 客户 端 还 是 服务 端 ，JavaScript 都 已 经 成 为 了 我 的 一 门 主要 编程 语言 ， 
没有 其 他 语言 比 它 更 适合 完成 这 些 工 作 。 



































回顾 这 15 年 ， 有 一 件 事 我 很 后 悔 ， 那 就 是 没有 在 2005 年 之 前 给 予 JavaScript 足够 的 重视 。 
更 准确 地 说 ， 我 并 没有 想到 JavaScript 会 像 C++, C£, Java 等 语言 一 样 ， 成 为 一 门 非常 有 
用 的 真正 的 编程 语言 。 








如 果 在 一 开始 时 就 能 遇 到 “你 不 知道 的 JavaScript” 系 列 从 书 ， 我 的 整个 职业 生涯 都 会 大 
不 相同 。 对 于 这 个 系列 从 书 ， 我 非常 欣赏 的 一 点 是 : 它 可 以 用 有 趣 并 且 有 效 的 方式 帮助 你 
构建 起 对 于 JavaScript 的 理解 。 
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本 书 第 二 部 分 “this 和 对 象 原 型 ”非常 不 错 ， 它 很 好 地 衔接 了 本 书 第 一 部 分 “作用 域 和 闭 
包 ”， 进 一 步 介 绍 了 JavaScript 语言 中 非常 重要 的 两 个 部 分 ，this 关键 字 和 原型 。 这 两 个 部 
分 对 于 你 未 来 的 学 习 来 说 非常 重要 ， 它 们 是 使 用 JavaScript 进行 编程 的 基础 。 只 有 黎 握 了 
如 何 创建 、 关 联 和 扩展 对 象 ， 你 才能 用 JavaScript 创建 类 似 谷 歌 地 图 这 样 大 型 的 复杂 应 用 。 




















在 我 看 来 ， 绝 大 多 数 Web 开发 者 可 能 都 没有 创建 过 一 个 JavaScript 对 象 ， 他 们 只 是 把 
JavaScript 当 作 按 钮 和 AJAX 请 求 之 间 的 事件 绑 定 粘 合剂 。 其 实 我 也 曾经 是 他 们 中 的 一 员 ， 
但 是 当 我 学 会 在 JavaScript 中 使 用 原型 和 创建 对 象 之 后 ， 整 个 世界 都 变样 了 。 如 果 你 也 只 
会 编写 事件 绑 定 代码 ， 那 么 这 本 书 是 非 读 不 可 的 ， 如 果 你 只 想 复习 一 下 的 话 ， 这 本 书 也 一 
定 是 首选 。 无 论 如 何 ， 你 绝对 不 会 失望 的 ， 相 信 我 ! 






































Nick Berardi 
nickberardi.com 


Twitter: @nberardi 





¥ 
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this 关键 字 是 JavaScript 中 最 复杂 的 机 制 之 一 。 它 是 一 个 很 特别 的 关键 字 ， 被 自动 定义 在 
所 有 函数 的 作用 域 中 。 但 是 即使 是 非常 有 经 验 的 JavaScript 开发 者 也 很 难说 清 它 到 底 指向 
什么 。 














任何 足够 先进 的 技术 都 和 魔法 无 异 。 





Arthur C. Clarke 














实际 上 ，JavaScript 中 this 的 机 制 并 没有 那么 先进 ， 但 是 开发 者 往往 会 把 理解 过 程 复杂 化 ， 
毫 无 疑问 ， 在 缺乏 清晰 认识 的 情况 下 ，this 对 你 来 说 完全 就 是 一 种 魔法 。 














“this” 是 沟通 过 程 中 极其 常见 的 一 个 代词 。 所 以 ， 在 交流 过 程 中 很 难 区 分 
我 们 到 底 把 “this” 当 作 代 词 还 是 当 作 关键 字 。 清 晰 起 见 ， 我 总 一 直 使 用 
this 表示 关键 字 ， 使 用 “this” 或 者 this 来 表示 代词 。 





























1.1 为 什么 要 用 this 


如 有 果 对 于 有 经 验 的 JavaScript 开发 者 来 说 this 都 是 一 种 非常 复杂 的 机 制 ， 那 它 到底 有 用 在 
哪里 呢 ? 真 的 值得 我 们 付出 这 么 大 的 代价 学 习 吗 ? 的 确 ， 在 介绍 怎么 做 之 前 我 们 需要 先 明 
白 为 什么 。 


下 面 我 们 来 解释 一 下 为 什么 要 使 用 this: 
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function identify() ( 
return this.name.toUpperCase(); 


} 


function speak() { 
var greeting = "Hello, I'm " + identify.call( this ); 
console.log( greeting ); 


} 


var me = { 

name: "Kyle" 
js 
var you = ( 

name: "Reader" 


a 


identify.call( me ); // KYLE 
identify.call( you ); // READER 


speak.call( me ); // Hello, 我 是 KYLE 
speak.call( you ); // Hello, 我 是 READER 


看 不 懂 这 段 代码 ? 不 用 担心 ! 我 们 很 快 就 会 讲解 。 现 在 请 暂时 抛 开 这 些 问 题 ， 专 注 于 为 
什么 。 


这 段 代 码 可 以 在 不 同 的 上 下 文 对 象 (me 和 you) 中 重复 使 用 函数 identify() 和 speak()， 
不 用 针对 每 个 对 象 编写 不 同 版 本 的 函数 。 


如 果 不 使 用 thits， 那 就 需要 给 identify() 和 speak() 显 式 传 入 一 个 上 下 文 对 象 。 


function identify(context) { 
return context.name.toUpperCase(); 


J 

function speak(context) { 
var greeting = "Hello, I'm " + identify( context ); 
console.log( greeting ); 


} 


identify( you ); // READER 
speak( me ); //hello, 我 是 KYLE 





然而 ，this 提供 了 一 种 更 优雅 的 方式 来 隐 式 “传递 ”一 个 对 象 引 用 ， 因 此 可 以 将 API 设计 
得 更 加 简洁 并 且 易 于 复 用 。 











随 着 你 的 使 用 模式 越 来 越 复杂 ， 显 式 传 递 上 下 文 对 象 会 让 代码 变 得 越 来 越 混乱 ， 使 用 this 
则 不 会 这 样 。 当 我 们 介绍 对 象 和 原型 时 ， 你 就 会 明白 函数 可 以 自动 引用 合适 的 上 下 文 对 象 
有 多 重要 。 
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1.2 误解 

我 们 之 后 会 解释 this 到 底 是 如 何 工作 的 ， 但 是 首先 需要 消除 一 些 关 于 this 的 错误 认识 。 
太 拘 泥 于 “this” 的 字面 意思 就 会 产生 一 些 误解 。 有 两 种 常见 的 对 于 this 的 解释 ， 但 是 它 
们 都 是 错误 的 。 


1.2.1 指向 自身 

人 们 很 容易 把 this 理解 成 指向 国 数 自身 ， 这 个 推 新 从 英语 的 语法 角度 来 说 是 说 得 通 的 。 
那么 为 什么 需要 从 函数 内 部 引用 国 数 自身 呢 ? 常见 的 原因 是 递归 (从 函数 内 部 调用 这 个 函 
数 ) 或 者 可 以 写 一 个 在 第 一 次 被 调用 后 自己 解除 绑 定 的 事件 处 理 器 。 


JavaScript 的 新 手 开 发 者 通常 会 认为 ， 既 然 函 数 看 作 一 个 对 象 (JavaScript 中 的 所 有 函数 都 
是 对 象 )， 那 就 可 以 在 调用 函数 时 存储 状态 (属性 的 值 )。 这 是 可 行 的 ， 有 些 时 候 也 确实 有 
用 ,但 是 在 本 书 即 将 介绍 的 许多 模式 中 你 会 发 现 ， 除 了 函数 对 象 还 有 许多 更 合适 存储 状态 
的 地 方 。 


不 过 现在 我 们 先 来 分 析 一 下 这 个 模式 ， 让 大 家 看 到 this 并 不 像 我 们 所 想 的 那样 指向 函数 
TH. 


我 们 想 要 记录 一 下 函数 foo 被 调用 的 次 数 ， 思 考 一 下 下 面 的 代码 : 
































function foo(num) { 
console.log( "foo: " + num ); 


// 记录 foo 被 调用 的 次 数 
this .Count++; 


} 
foo.count = 0; 
var i; 


for (i-0; i«10; i++) { 
if (i > 5) { 
foo( i); 
} 
} 
// foo: 
// foo: 


// foo: 
// foo: 


\D 0-0 

















// foo 被 调用 了 多 少 次 ? 
console.log( foo.count ); // 0 -- WTF? 





console. log 语句 产生 了 4 条 输出 ， 证 明 fool...) 确实 被 调用 了 4 次， 但 是 foo.count 仍然 
是 0。 显然 从 字面 意思 来 理解 this 是 错误 的 。 





执行 foo.count = 0 时 ， 的 确 向 函数 对 象 foo 添加 了 一 个 属性 count。 但 是 函数 内 部 代码 
this.count 中 的 this 并 不 是 指向 那个 函数 对 象 ， 所 以 虽然 属性 名 相同 ， 根 对 象 却 并 不 相 
同 ， 困 惑 随 之 产生 。 


负责 的 开发 者 一 定 会 问 “ 如 果 我 增加 的 count 属性 和 预期 的 不 一 样 ， 那 我 增 
加 的 是 哪个 count ? ”实际 上 ， 如 果 他 深 入 探索 的 话 ， 就 会 发 现 这 段 代码 在 
无 意 中 创建 了 一 个 全 局 变量 count (原理 参见 第 2 章 )， 它 的 值 为 NaN。 当 然 ， 
如 果 他 发 现 了 这 个 奇怪 的 结果 ， 那 一 定 会 接着 问 :“ 为 什么 它 是 全 局 的 ， 为 
什么 它 的 值 是 NaN 而 不 是 其 他 更 合适 的 值 ? ”( 参 见 第 2 章 。) 

















遇 到 这 样 的 问题 时 ， 许 多 开发 者 并 不 会 深入 思考 为 什么 this 的 行为 和 预期 的 不 一 致 ， 也 不 
会 试图 回答 那些 很 难 解决 但 却 非常 重要 的 问题 。 他 们 只 会 回避 这 个 问题 并 使 用 其 他 方法 来 
达到 目的 ， 比 如 创建 男 一 个 带 有 count 属性 的 对 象 。 














function foo(num) { 
console.log( "foo: " + num ); 


// 记录 foo 被 调用 的 次 数 


data.count++; 


} 

var data = { 
count: 0 

UE 

var i; 


for (i20; i«10; i++) { 
if (i > 5) { 
foo( i ); 
} 
} 
// foo: 6 
II foo: 7 
// foo: 8 
//| foo: 9 


/1 foo 被 调用 了 多 少 次 ? 
console.log( data.count ); // 4 





从 某 种 角度 来 说 这 个 方法 确实 “解决 ”了 问题 ,但 可 惜 它 名 略 了 真正 的 问题 一 一 无 法 开 
this 的 含义 和 工作 原理 一 一 而 是 返回 舒适 区 ， 使 用 了 一 种 更 熟悉 的 技术 : 词法 作用 域 。 





n 
E 
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词法 作用 域 是 一 种 非常 优秀 并 且 有 用 的 技术 。 我 丝毫 没有 贬低 它 的 意思 (可 
以 参考 本 书 第 一 部 分 “作用 域 和 闭 包 ”)。 但 是 如 果 你 仅仅 是 因为 无 法 猪 对 
this 的 用 法 ， 就 放弃 学 习 this 而 去 使 用 词法 作用 域 ， 就 不 能 算是 一 种 很 好 
的 解决 办 法 了 。 











如 果 要 从 函数 对 象 内 部 引用 它 自 身 ， 那 只 使 用 this 是 不 够 的 。 一 般 来 说 你 需要 通过 一 个 指 
向 函数 对 象 的 词法 标识 符 (变量 ) 来 引用 它 。 


思考 一 下 下 面 这 两 个 函数 : 











function foo() { 
foo.count = 4; // foo 指向 它 自身 
} 


setTimeout( function(){ 


// 匿名 (没有 名 字 的 ) 函数 无 法 指向 自身 
Ja 10 ); 


第 一 个 国 数 被 称 为 具名 国 数 ， 在 它 内 部 可 以 使 用 foo 来 引用 自身 。 


但 是 在 第 二 个 例子 中 ， 传 人 setTimeout(..) 的 回调 函数 没有 名 称 标识 符 (这 种 函数 被 称 为 
匿名 函数 )， 因 此 无 法 从 函数 内 部 引用 自身 。 








还 有 一 种 传统 的 但 是 现在 已 经 被 弃 用 和 批判 的 用 法 ， 是 使 用 arguments. 
callee 来 引用 当前 正在 运行 的 函数 对 象 。 这 是 唯一 一 种 可 以 从 匿名 函数 对 象 
内 部 引用 自身 的 方法 。 然 而 ， 更 好 的 方式 是 避免 使 用 匿名 函数 ， 至 少 在 需要 
自 引 用 时 使 用 具名 函数 (表达 式 )。arguments.callee 已 经 被 弃 用 ， 不 应 该 再 
使 用 它 。 























所 以 ， 对 于 我 们 的 例子 来 说 ， 另 一 种 解决 方法 是 使 用 foo 标识 符 替 代 this 来 引用 函数 
对 象 : 


function foo(num) { 
console.log( "foo: " + num ); 


// 记录 foo 被 调用 的 次 数 
foo .count++; 

} 

foo.count=0 

var i; 


for (i=0; i<10; i++) { 
if (i > 5) { 
foo( i); 





// foo: 
// foo: 
// foo: 
// foo: 


\D 05-0 


// foo 被 调用 了 多 少 次 ? 


console.log( foo.count 





5 // 4 


然而 ， 这 种 方法 同样 回避 了 this 的 问题 ， 并 且 完 全 依赖 于 变量 foo 的 词法 作用 域 。 
另 一 种 方法 是 强制 this 指向 foo 函数 对 象 : 





function foo(num) { 


console.log( "foo: " 





* num ); 


// 记录 foo 被 调用 的 次 数 
// 注意 ， 在 当前 的 调用 方式 下 《参见 下 方 代码 ) this 确实 指向 foo 


this.count++; 


foo.count = 0; 
var i; 


for (i=0; i<10; i++) { 
if (i > 5) { 


// 使 用 calt(..) 可 以 确保 this 指向 函数 对 象 foo 本 身 


foo.call( foo, 
} 
} 
// foo: 
// foo: 


// foo: 
// foo: 


DONA 


// foo 被 调用 了 多 少 次 ? 


console.log( foo.count 





这 次 我 们 接受 了 this, 没有 
细 解 释 具 体 的 原理 。 


i) 


25 // 4 





回避 它 。 如 果 你 仍然 感到 困惑 的 话 ， 不 用 担心 ， 之 后 我 们 会 详 


1.2.2” 它 的 作用 域 
第 二 种 常见 的 误解 是 ，this 指向 函数 的 作用 域 。 这 个 问题 有 点 复杂 ， 因 为 在 某 种 情况 下 它 
是 正确 的 ， 但 是 在 其 他 情况 下 它 却 是 错误 的 。 





需要 明确 的 是 ，this 在 任何 情况 下 都 不 指向 函数 的 词法 作用 域 。 在 JavaScript 内 部 ， 作 用 
域 确实 和 对 象 类 似 ， 可 见 的 标识 符 都 是 它 的 属性 。 但 是 作用 域 “ 对 象 ” 无 法 通过 JavaScript 
代码 访问 ， 它 存在 于 JavaScript 引擎 内部。 
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思考 一 下 下 面 的 代码 ， 它 试图 (但 是 没有 成 功 ) 跨越 边界 ， 使 用 this 来 隐 式 引用 函数 的 词 
法 作用 域 : 











function foo() { 
var a = 2; 
this.bar(); 
} 


function bar() { 
console.log( this.a ); 


} 

foo(); // ReferenceError: a is not defined 
这 段 代 码 中 的 错误 不 止 一 个 。 虽 然 这 段 代码 看 起 来 好 像 是 我 们 故意 写 出 来 的 例子 ， 但 是 实 
际 上 它 出 自 一 个 公共 社区 中 互助 论坛 的 精华 代码 。 这 段 代码 非常 完美 (同时 也 令 人 伤感 ) 
地 展示 了 this 多 么 容易 误导 人 。 
首先 ， 这 段 代 码 试图 通过 this.bar() 来 引用 bar() 函数 。 这 是 绝对 不 可 能 成 功 的 ， 我 们 之 
后 会 解释 原因 。 调 用 baro 最 自然 的 方法 是 省 略 前 面 的 this， 直 接 使 用 词法 引用 标识 符 。 

















此 外 ， 编 写 这 段 代 码 的 开发 者 还 试图 使 用 this 联通 foo() 和 bar O 的 词法 作用 域 ， 从 而 让 
bar() 可 以 访问 foo() 作用 域 里 的 变量 a。 这 是 不 可 能 实现 的 ， 你 不 能 使 用 this 来 引用 一 
个 词法 作用 域内 部 的 东西 。 











每 当 你 想 要 把 this 和 词法 作用 域 的 查找 混合 使 用 时 ， 一 定 要 提醒 自己 ， 这 和 是 无 法 实现 的 。 


1.3 this 到 底 是 什么 
排除 了 一 些 错误 理解 之 后 ， 我 们 来 看 看 this 到 底 是 一 种 什么 样 的 机 制 。 





之 前 我 们 说 过 this 是 在 运行 时 进行 绑 定 的 ， 并 不 是 在 编写 时 绑 定 ， 它 的 上 下 文 取决 于 函数 调 
用 时 的 各 种 条 件 。this 的 绑 定 和 国 数 声明 的 位 置 没 有 任何 关系 ， 只 取决 于 国 数 的 调用 方式 。 
当 一 个 函数 被 调用 时 ， 会 创建 一 个 活动 记录 (有 时 候 也 称 为 执行 上 下 文 )。 这 个 记录 会 包 
含 函数 在 哪里 被 调用 (调用 栈 )、 函 数 的 调用 方法 、 传 入 的 参数 等 信息 。this 就 是 记录 的 
其 中 一 个 属性 ， 会 在 函数 执行 的 过 程 中 用 到 。 























在 下 一 章 我 们 会 学 习 如 何 寻找 函数 的 调用 位 置 ， 从 而 判断 函数 在 执行 过 程 中 会 如 何 绑 定 
this。 


1.4 小结 
对 于 那些 没有 投入 时 间 学 习 this 机 制 的 JavaScript 开发 者 来 说 ，this 的 绑 定 一 直 是 一 件 非 
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常 令 人 困惑 的 事 。this 是 非常 重要 的 ,但 是 猜测 、 尝 试 并 出 错 和 盲目 地 从 Stack Overflow 
上 复制 和 粘贴 答案 并 不 能 让 你 真正 理解 this 的 机 制 。 

学 习 this 的 第 一 步 是 明白 this 既 不 指向 函数 自身 也 不 指向 函数 的 词法 作用 域 ， 你 也 许 被 
这 样 的 解释 误导 过 ,但 其 实 它们 都 是 错误 的 。 























this 实际 上 是 在 函数 被 调用 时 发 生 的 绑 定 ， 它 指向 什么 完全 取决 于 函数 在 哪里 被 调用 。 
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第 2 章 


this 全 面 解析 





在 第 1 章 中 ， 我 们 排除 了 一 些 对 于 this 的 错误 理解 并 且 明 白 了 每 个 函数 的 this 是 在 调用 
时 被 绑 定 的 ， 完 全 取决 于 函数 的 调用 位 置 (也 就 是 函数 的 调用 方法 )。 


2.1 调用 位 置 

在 理解 this 的 绑 定 过 程 之 前 ， 首 先 要 理解 调用 位 置 : 调用 位 置 就 是 函数 在 代码 中 被 调用 的 
位 置 (而 不 是 声明 的 位 置 )。 只 有 仔细 分 析 调 用 位 置 才能 回答 这 个 问题 : 这 个 this 到 底 引 
用 的 是 什么 ? 

通常 来 说 ， 寻 找 调 用 位 置 就 是 寻找 “函数 被 调用 的 位 置 "， 但 是 做 起 来 并 没有 这 么 简单 ， 
因为 某 些 编程 模式 可 能 会 隐藏 真正 的 调用 位 置 。 

最 重要 的 是 要 分 析 调 用 栈 (就 是 为 了 到 达 当 前 执行 位 置 所 调用 的 所 有 函数 )。 我 们 关心 的 
调用 位 置 就 在 当前 正在 执行 的 函数 的 前 一 个 调用 中 。 

下 面 我 们 来 看 看 到 底 什么 是 调用 栈 和 调用 位 置 : 


























function baz() { 
// 当前 调用 栈 是 : baz 
// 因此 ， 当 前 调用 位 置 是 全 局 作用 域 











console.log( "baz" ); 
bar(); // «-- bar 的 调用 位 置 
} 


function bar() { 
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// 
// 


当前 调用 栈 是 baz -> bar 
因此 ， 当 前 调用 位 置 在 baz 中 











console.log( "bar" ); 


foo(); // «-- foo 的 调用 位 置 


} 


function foo() { 


// 
// 


当前 调用 栈 是 baz -> bar -> foo 
因此 ， 当 前 调用 位 置 在 bar 中 











console.log( "foo" ); 


} 














baz(); // «-- baz 的 调用 位 置 
注意 我 们 是 如 何 (从 调用 栈 中 ) 分 析出 真正 的 调用 位 置 的 ， 因 为 它 决定 了 this 的 绑 定 。 














你 可 以 把 调用 栈 想象 成 一 个 函数 调用 链 ， 就 像 我 们 在 前 面 代 码 段 的 注释 中 所 
写 的 一 样 。 但 是 这 种 方法 非常 麻烦 并 且 容 易 出 错 。 另 一 个 查看 调用 栈 的 方法 
是 使 用 浏览 器 的 调试 工具 。 绝 大 多 数 现代 桌面 浏览 器 都 内 置 了 开发 者 工具 ， 
其 中 包含 JavaScript 调试 器 。 就 本 例 来 说 ， 你 可 以 在 工具 中 给 foo() 函数 的 
第 一 行 代码 设置 一 个 断 点 ， 或 者 直接 在 第 一 行 代码 之 前 插入 一 条 debugger; 
语句 。 运 行 代 码 时 ， 调 试 器 会 在 那个 位 置 暂停 ， 同 时 会 展示 当前 位 置 的 函数 
调用 列表 ， 这 就 是 你 的 调用 栈 。 因 此 ， 如 果 你 想 要 分 析 this 的 绑 定 ， 使 用 开 
发 者 工具 得 到 调用 栈 ， 然 后 找到 栈 中 第 二 个 元 素 ， 这 就 是 真正 的 调用 位 置 。 











2.2 ” 绑 定 规则 
我 们 来 看 看 在 函数 的 执行 过 程 中 调用 位 置 如 何 决定 this 的 绑 定 对 象 。 


你 必须 找到 调用 位 置 ， 然 后 判断 需要 应 用 下 面 四 条 规则 中 的 哪 一 条 。 我 们 首先 会 分 别 解释 
这 四 条 规则 ， 然 后 解释 多 条 规则 都 可 用 时 它们 的 优先 级 如 何 排列 。 


2.2.1 








默认 绑 定 


首先 要 介绍 的 是 最 常用 的 函数 调用 类 型 独立 函数 调用 。 可 以 把 这 条 规则 看 作 是 无 法 应 用 
其 他 规则 时 的 默认 规则 。 


思考 一 下 下 面 的 代码 : 


function foo() { 
console.log( this.a ); 


} 
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vara- 2; 


foo(); // 2 


你 应 该 注意 到 的 第 一 件 事 是 ， 声 明 在 全 局 作用 域 中 的 变量 (比如 var a = 2) 就 是 全 局 对 
象 的 一 个 同名 属性 。 它 们 本 质 上 就 是 同一 个 东西 ， 并 不 是 通过 复制 得 到 的 ， 就 像 一 个 硬币 





的 两 面 一 样 。 


接 下 来 我 们 可 以 看 到 当 调 用 foo() 时 ，this.a 被 解析 成 了 全 局 变量 a。 为 什么 ? 
例 中 ， 国 数 调 用 时 应 用 了 this 的 默认 绑 定 ， 因 此 this 指向 全 局 对 象 。 








因为 在 本 


那么 我 们 怎么 知道 这 里 应 用 了 默认 绑 定 呢 ? 可 以 通过 分 析 调 用 位 置 来 看 看 foo() 是 如 何 调 
用 的 。 在 代码 中 ，foo() 是 直接 使 用 不 带 任 何 修饰 的 函数 引用 进行 调用 的 ， 因 此 只 能 使 用 








默认 绑 定 ， 无 法 应 用 其 他 规则 。 


如 果 使 用 严格 模式 (strict mode)， 那 么 全 局 对 象 将 无 法 使 用 默认 绑 定 ， 因 此 this 会 绑 定 





到 undefined. 


function foo() { 
"use strict"; 


console.log( this.a ); 


} 
var a = 2; 


foo(); // TypeError: this is undefined 


这 里 有 一 个 微妙 但 是 非常 重要 的 细节 ， 虽 然 this 的 绑 定 规则 完全 取决 于 调用 位 置 ， 但 是 只 
有 foo() 运行 在 非 strict mode 下 时 ， 默 认 绑 定 才能 绑 定 到 全 局 对 象 ， 严 格 模式 下 与 foo() 


的 调用 位 置 无 关 : 


function foo() { 
console.log( this.a ); 


} 
var a = 2; 


(function(){ 
"use strict"; 


fooQ; // 2 
DO; 


通常 来 说 你 不 应 该 在 代码 中 混合 使 用 strict mode 和 non-strict mode, 





整个 


程序 要 么 严格 要 么 非 严 格 。 然 而 ， 有 时 候 你 可 能 会 用 到 第 三 方 库 ， 甚 严格 程 





度 和 你 的 代码 有 所 不 同 ， 因 此 一 定 要 注意 这 类 兼容 性 细节 。 
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2.22 ” 隐 式 绑 定 
条 需要 考虑 的 规则 是 调用 位 置 是 否 有 上 下 文 对 象 ， 或 者 说 是 否 被 其 个 对 象 拥有 或 者 包 


mo 
含 ， 不 过 这 种 说 法 可 能 会 造成 一 些 误导 。 
思考 下 面 的 代码 : 


function foo() { 
console.log( this.a ); 


J 

var obj = ( 
de; 
foo: foo 


E 

obj.foo(); // 2 
首先 需要 注意 的 是 fooO 的 声明 方式 ， 及 其 之 后 是 如 何 被 当 作 引用 属性 添加 到 obj 中 的 。 
但 是 无 论 是 直接 在 obj 中 定义 还 是 先 定义 再 添加 为 引用 属性 ， 这 个 函数 严格 来 说 都 不 属于 
obj 对 象 。 








然而 ， 调 用 位 置 会 使 用 obj 上 下 文 来 引用 函数 ， 因 此 你 可 以 说 函数 被 调用 时 obj 对 象 “ 拥 
有 ”或 者 “包含 ” 它 。 
无 论 你 如 何 称呼 这 个 模式 ， 当 fooO 被 调用 时 ， 它 的 落脚 点 确实 指向 obj 对 象 。 当 函数 引 


用 有 上 下 文 对 象 时 ， 隐 式 绑 定 规则 会 把 函数 调用 中 的 this 绑 定 到 这 个 上 下 文 对 象 。 因 为 调 
用 foo() 时 this 被 绑 定 到 obj， 因 此 this.a 和 obj.a 是 一 样 的 。 














对 象 属性 引用 链 中 只 有 最 顶层 或 者 说 最 后 一 层 会 影响 调用 位 置 。 举 例 来 说 : 


function foo() { 
console.log( this.a ); 


} 

var obj2 = ( 
a: 42, 
foo: foo 

Js 

var obj1 = ( 
a 
obj2: obj2 

js 


obji.obj2.foo(); // 42 


隐 式 丢失 
一 个 最 常见 的 this 绑 定 问题 就 是 被 隐 式 绑 定 的 函数 会 丢失 绑 定 对 象 ， 也 就 是 说 它 会 应 用 上 默 
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认 绑 定 ， 从 而 把 this 绑 定 到 全 局 对 象 或 者 undefined E, 取决 于 是 否 是 严格 模式 。 
思考 下 面 的 代码 : 














function foo() { 
console.log( this.a ); 


} 

var obj = ( 
d? 2, 
foo: foo 

J; 


var bar = obj.foo; // 函数 别名 | 
var a = "oops, global'; // a 是 全 局 对 象 的 属性 
bar(); // "oops, global" 


虽然 bar 是 obj.foo 的 一 个 引用 ， 但 是 实际 上 ， 它 引用 的 是 foo 函数 本 身 ， 因 此 此 时 的 
bar() 甚 实 是 一 个 不 带 任何 修饰 的 函数 调用 ， 因 此 应 用 了 默认 绑 定 。 











一 种 更 微妙 、 更 常见 并 且 更 出 乎 意料 的 情况 发 生 在 传 入 回调 函数 时 : 





function foo() { 
console.log( this.a ); 


j 


function doFoo(fn) f 
// fn 其 实 引用 的 是 foo 














fn(); // <-- 调用 位 置 ! 


var obj = ( 
di 2; 
foo: foo 


J; 





var a = "oops, global"; // a 是 全 局 对 象 的 属性 


doFoo( obj.foo ); // "oops, global" 


参数 传递 其 实 就 是 一 种 隐 式 赋值 ， 因 此 我 们 传 入 函数 时 也 会 被 隐 式 赋值 ， 所 以 结果 和 上 一 
个 例子 一 样 。 

如 果 把 函数 传 入 语言 内 置 的 函数 而 不 是 传 入 你 自己 声明 的 函数 ， 会 发 生 什么 呢 ?” 结 果 是 一 
样 的 ， 没 有 区 别 : 


function foo() { 
console.log( this.a ); 
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} 
var obj = ( 
di 2; 
foo: foo 
5 
var a = "oops, global"; // a 是 全 局 对 象 的 属性 


setTimeout( obj.foo, 100 ); // "oops, global" 





JavaScript 环境 中 内 置 的 setTimeout() 国 数 实现 和 下 面 的 伪 代 码 类 似 : 











function setTimeout(fn,delay) { 
// 等 待 delay 毫秒 
fn(); // <-- 调用 位 置 ! 


就 像 我 们 看 到 的 那样 ， 回 调 函 数 丢 失 this 绑 定 是 非常 常见 的 。 除 此 之 外 ， 还 有 一 种 情 
Wi this 的 行为 会 出 乎 我 们 意料 : 调用 回调 函数 的 函数 可 能 会 修改 this。 在 一 些 流 行 的 
JavaScript 库 中 事件 处 理 器 常会 把 回调 函数 的 this 强制 绑 定 到 触发 事件 的 DOM 元 素 上 。 
这 在 一 些 情况 下 可 能 很 有 用 ,但 是 有 时 它 可 能 会 让 你 感到 非常 郁 问 。 遗 憾 的 是 ， 这 些 工具 
通常 无 法 选择 是 否 启 用 这 个 行为 。 











无 论 是 哪 种 情况 ，this 的 改变 都 是 意 想不到 的 ， 实 际 上 你 无 法 控制 回调 函数 的 执行 方式 ， 
因此 就 没有 办 法 控制 会 影响 绑 定 的 调用 位 置 。 之 后 我 们 会 介绍 如 何 通 过 固定 this 来 修复 
(这 里 是 双关 ,“ 修 复 ” 和 “固定 ”的 英语 单词 都 是 fixing) 这 个 问题 。 


2.2.3 BERAE 
就 像 我 们 刚才 看 到 的 那样 ， 在 分 析 隐 式 绑 定 上 时， 我 们 必须 在 一 个 对 象 内 部 包含 一 个 指向 函 
数 的 属性 ， 并 通过 这 个 属性 间接 引用 函数 ， 从 而 把 this 间接 (ER) 绑 定 到 这 个 对 象 上 。 


那么 如 有 果 我 们 不 想 在 对 象 内 部 包含 国 数 引 用 ， 而 想 在 某 个 对 象 上 强制 调用 函数 ， 该 怎么 
做 呢 ? 


JavaScript 中 的 “所 有 ”函数 都 有 一 些 有 用 的 特性 (这 和 它们 的 [[ 原型 有 关 一 一 之 后 我 
们 会 详细 介绍 原型 )， 可 以 用 来 解决 这 个 问题 。 具 体 点 说 ， 可 以 使 用 函数 的 catl(..) 和 
apply(..) 方法。 严格 来 说 ，JavaScript 的 宿主 环境 有 时 会 提供 一 些 非常 特殊 的 函数 ， 它 们 
并 没有 这 两 个 方法 。 但 是 这 样 的 函数 非常 罕见 ，JavaScript 提供 的 绝 大 多 数 函 数 以 及 你 自 
己 创建 的 所 有 函数 都 可 以 使 用 caLL(..) 和 apply(..) 方 法 。 

这 两 个 方法 是 如 何 工作 的 呢 ? 它们 的 第 一 个 参数 是 一 个 对 象 ， 它 们 会 把 这 个 对 象 绑 定 到 
this， 接 着 在 调用 函数 时 指定 这 个 this。 因 为 你 可 以 直接 指定 this 的 绑 定 对 象 ， 因 此 我 
们 称 之 为 显 式 绑 定 。 
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思考 下 面 的 代码 : 











function foo() { 
console.log( this.a ); 


} 

var obj = ( 
a:2 

E 


foo.call( obj ); // 2 


通过 foo.call(..), 我 们 可 以 在 调用 foo 时 强制 把 它 的 this 绑 定 到 obj E. 





如 果 你 传人 了 一 个 原始 值 (字符 串 类 型 、 布 尔 类 型 或 者 数字 类 型 ) RHE this 的 绑 定 对 
象 ， 这 个 原始 值 会 被 转换 成 它 的 对 象形 式 (也 就 是 new String(..), new Boolean(..) 或 者 
new Number(..))。 这 通常 被 称 为 “ 装 箱 ”。 


可 异 ， 显 式 绑 定 仍然 无 法 解决 我 们 之 前 提 


从 this 绑 定 的 角度 来 说 ，call(..) 和 apply(.…) 是 一 样 的 ， 它 们 的 区 别 体 现 
在 其 他 的 参数 上 ， 但 是 现在 我 们 不 用 考虑 这 些 。 








1. 硬 绑 定 


但 是 显 式 绑 定 的 一 个 变种 可 以 解决 这 个 问题 。 


4875 MEARE: 


function foo() { 
console.log( this.a ); 


j 


var obj = ( 
a:2 
E 


var bar = function() { 
foo.call( obj ); 
5 


barQ; // 2 
setTimeout( bar, 100 ); // 2 


// 硬 绑 定 的 bar 不 可 能 再 修改 它 的 this 
bar.call( window ); // 2 








的 丢失 绑 定 问题 。 





我 们 来 看 看 这 个 变种 到 底 是 怎样 工作 的 。 我 们 创建 了 函数 bar()， 并 在 它 的 内 部 手动 调用 
了 foo.call(obj)， 因 此 强制 把 foo 的 this 绑 定 到 了 obj。 无 论 之 后 如 何 调 用 函数 bar， 它 





总 会 手动 在 obj 上 调用 foo。 这 种 绑 定 是 一 种 显 式 的 强制 绑 定 ， 

















大 








此 我 们 称 之 为 硬 绑 定 。 





硬 绑 定 的 典型 应 用 场景 就 是 创建 一 个 包 吉 函数， 传人 所 有 的 参数 并 返回 接收 到 的 所 有 值 : 


function foo(something) { 
console.log( this.a, something ); 
return this.a + something; 


} 


var obj = { 
a:2 
J; 


var bar = function() { 
return foo.apply( obj, arguments ); 


h 


var b = bar( 3); // 23 
console.log( b ); // 5 


另 一 种 使 用 方法 是 创建 一 个 i 可 以 重复 使 用 的 辅助 函数 : 


function foo(something) { 
console.log( this.a, something ); 
return this.a * something; 


// 简单 的 辅助 绑 定 函数 
function bind(fn, obj) { 
return function() { 
return fn.apply( obj, arguments ); 





F 
} 


var obj = { 
a:2 
Js 


var bar = bind( foo, obj ); 


var b = bar( 3); // 2 3 
console.log( b ); // 5 


由 于 硬 绑 定 是 一 种 非常 常用 的 模式 ， 所 以 在 ES5 中 提供 了 内 置 的 方法 Function.prototype. 


bind， 它 的 用 法 如 下 : 


function foo(something) { 
console.log( this.a, something ); 
return this.a * something; 
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var obj = ( 
a:2 
E 


var bar - foo.bind( obj ); 


var b = bar( 3 ); // 2 3 
console.log( b ); // 5 


bind(..) 会 返回 一 个 硬 编码 的 新 函数 ， 它 会 把 参数 设置 为 this 的 上 下 文 并 调用 原始 函数 。 
2. API 调 用 的 “上 下 文 ” 

第 三 方 库 的 许多 函数 ， 以 及 JavaScript 语言 和 宿主 环境 中 许多 新 的 内 置 函数 ， 都 提供 了 一 
个 可 选 的 参数 ， 通 常 被 称 为 “上 下 文 ”(context) ， 其 作用 和 bind(..) 一 样 ， 确 保 你 的 回调 
函数 使 用 指定 的 this, 


举例 来 说 : 





function foo(el) { 
console.log( el, this.id ); 


} 
var obj = ( 

id: "awesome" 
i 


// 调用 foo(..) 时 把 this 绑 定 到 obj 

[1, 2, 3].forEach( foo, obj ); 

// 1 awesome 2 awesome 3 awesome 
这 些 函 数 实际 上 就 是 通过 call. .) 或 者 apply(..) 实现 了 显 式 绑 定 ， 这 样 你 可 以 少 些 一 些 
代码 。 


2.2.4 new 绑 定 
这 是 第 四 条 也 是 最 后 一 条 this 的 绑 定 规则 ， 在 讲解 它 之 前 我 们 首先 需要 澄清 一 个 非常 常见 
的 关于 JavaScript 中 国 数 和 对 象 的 误解 。 
在 传统 的 面向 类 的 语言 中 ,“ 构 造 函 数 ” 是 类 中 的 一 些 特殊 方法 ， 使 用 new 初始 化 类 时 会 
调用 类 中 的 构造 函数 。 通 常 的 形式 是 这 样 的 : 

something = new MyClass(..); 
JavaScript 也 有 一 个 new 操作 符 ， 使 用 方法 看 起 来 也 和 那些 面向 类 的 语言 一 样 ， 绝 大 多 数 开 


发 者 都 认为 JavaScript 中 new 的 机 制 也 和 那些 语言 一 样 。 然 而 ，JavaScript 中 new 的 机 制 实 
际 上 和 面向 类 的 语言 完全 不 同 。 




















首先 我 们 重新 定义 一 下 JavaScript 中 的 “构造 国 数 "。 在 JavaScript 中 ， 构 造 函 数 只 是 一 些 
使 用 new 操作 符 时 被 调用 的 函数 。 它 们 并 不 会 属于 某 个 类 ， 也 不 会 实例 化 一 个 类 。 实 际 上 ， 
它们 其 至 都 不 能 说 是 一 种 特殊 的 函数 类 型 ， 它 们 只 是 被 new 操作 符 调用 的 普通 函数 而 已 。 


举例 来 说 ， 思 考 一 下 Number(..) 作为 构造 函数 时 的 行为 ，ES5.1 中 这 样 描述 它 : 





15.7[.20 Number 构造 函数 
3$ Number È new 表达 式 中 被 调用 时 ， 它 是 一 个 构造 函数 : 它 会 初始 化 新 创建 的 
对 象 。 
所 以 ， 包 括 内 置 对 象 函数 (比如 Number(..)， 详 情 请 查看 第 3 章 ) 在 内 的 所 有 函数 都 可 
以 用 new 来 调用 ， 这 种 函数 调用 被 称 为 构造 函数 调用 。 这 里 有 一 个 重要 但 是 非常 细微 的 区 
9l: 实际 上 并 不 存在 所 谓 的 “构造 函数 ”"， 只 有 对 于 函数 的 “构造 调用 ”。 
使 用 new 来 调用 函数 ， 或 者 说 发 生 构 造 函 数 调用 时 ， 会 自动 执行 下 面 的 操作 。 
创建 (或 者 说 构造 ) 一 个 全 新 的 对 象 。 
这 个 新 对 象 会 被 执行 [[ 原型 ] 连接 。 
这 个 新 对 象 会 绑 定 到 国 数 调用 的 this, 
.如果 函数 没有 返回 其 他 对 象 ， 那 么 new 表达 式 中 的 函数 调用 会 自动 返回 这 个 新 对 象 。 








E 





BOUM 








我 们 现在 关心 的 是 第 12b. 4$ 3 步 、 第 4 步 ， 所 以 暂时 跳 过 第 2 步 ， 第 5 章 会 详细 介绍 它 。 
思考 下 面 的 代码 : 
function foo(a) f 


this.a = a; 


j 


var bar - new foo(2); 
console.log( bar.a ); // 2 


使 用 new 来 调用 fooC..) 时 ， 我 们 会 构造 一 个 新 对 象 并 把 它 绑 定 到 fool.) 调用 中 的 this 
E. new 是 最 后 一 种 可 以 影响 函数 调用 时 this 绑 定 行为 的 方法 ， 我 们 称 之 为 new 绑 定 。 


2.3 ”优先 级 


现在 我 们 已 经 了 解 了 函数 调用 中 this 绑 定 的 四 条 规则 ， 你 需要 做 的 就 是 找到 函数 的 调用 位 
置 并 判断 应 当 应 用 哪 条 规则 。 但 是 ， 如 果 某 个 调用 位 置 可 以 应 用 多 条 规则 该 怎么 办 ? 为 了 
解决 这 个 问题 就 必须 给 这 些 规则 设 定 优先 级 ， 这 就 是 我 们 接 下 来 要 介绍 的 内 容 。 


EE, 默认 绑 定 的 优先 级 是 四 条 规则 中 最 低 的 ， 所 以 我 们 可 以 先 不 考虑 它 。 
隐 式 绑 定 和 显 式 绑 定 哪 个 优先 级 更 高 ? 我 们 来 测试 一 下 : 
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function foo() { 
console.log( this.a ); 


J 

var obj1 = { 
a: 2; 
foo: foo 

E 

var obj2 = ( 
a: 3, 
foo: foo 

E 


obj1.foo(); // 2 
obj2.foo(); // 3 


obj1.foo.call( obj2 ); // 3 
0bj2.foo.call( obj1 ); // 2 


可 以 看 到 ， 显 式 绑 定 优先 级 更 高 ， 也 就 是 说 在 判断 时 应 当先 考虑 是 否 可 以 应 用 显 式 绑 定 。 
现在 我 们 需要 搞 清楚 new 绑 定 和 隐 式 绑 定 的 优先 级 谁 高 谁 低 : 





function foo(something) { 
this.a - something; 


} 

var obj1 = { 
foo: foo 

J; 


var obj2 = {}; 


obj1.foo( 2 ); 
console.log( obj1.a ); // 2 


obji.foo.call( obj2, 3 ); 
console.log( obj2.a ); // 3 


var bar = new obji.foo( 4 ); 
console.log( objí.a ); // 2 
console.log( bar.a ); // 4 





可 以 看 到 new 绑 定 比 隐 式 绑 定 优先 级 高 。 但 是 new 绑 定 和 显 式 绑 定 谁 的 优先 级 更 高 呢 ? 




















new 和 call/apply 无 法 一 起 使 用 ， 因 此 无 法 通过 new foo.call(obj1) 来 直接 
进行 测试 。 但 是 我 们 可 以 使 用 硬 绑 定 来 测试 它 俩 的 优先 级 。 





在 看 代码 之 前 先 回 忆 一 下 硬 绑 定 是 如 何 工作 的 。Function.prototype.bind(..) 会 创建 一 个 
新 的 包装 函数 ， 这 个 函数 会 忽略 它 当 前 的 this 绑 定 〈 无 论 绑 定 的 对 象 是 什么 ) ， 并 把 我 们 
提供 的 对 象 绑 定 到 this 上 。 

这 样 看 起 来 硬 绑 定 〈 也 是 显 式 绑 定 的 一 种 ) 似乎 比 new 绑 定 的 优先 级 更 高 ， 无 法 使 用 new 
来 控制 this 绑 定 。 


我 们 看 看 是 不 是 这 样 : 








function foo(something) { 
this.a - something; 


} 
var obj1 = {}; 


var bar = foo.bind( obj1 ); 
bar( 2 ); 
console.log( objí.a ); // 2 


var baz - new bar(3); 
console.log( objí.a ); // 2 
console.log( baz.a ); // 3 


出 乎 意料 ! bar 被 硬 绑 定 到 objl 上 ， 但 是 new bar(3) 并 没有 像 我 们 预计 的 那样 把 obj1.a 
修改 为 3。 相 反 ，new 修改 了 硬 绑 定 〈 到 objl 的 ) 调用 bar(..) 中 的 this。 因 为 使 用 了 
new 绑 定 ， 我 们 得 到 了 一 个 名 字 为 baz 的 新 对 象 ， 并 且 baz.a 的 值 是 3。 








再 来 看 看 我 们 之 前 介绍 的 “ 裸 ” 辅 助 函 数 bind: 


function bind(fn, obj) { 
return function() { 
fn.apply( obj, arguments ); 


) ; 
非常 令 人 惊讶 ， 因 为 看 起 来 在 辅助 函数 中 new 操作 符 的 调用 无 法 修改 this 绑 定 ， 但 是 在 刚 
才 的 代码 中 new 确实 修改 了 this 绑 定 。 





实际 上 ，ES5 中 内 置 的 Function.prototype.bind(..) 更 加 复杂 。 下 面 是 MDN 提供 的 一 种 
bind(..) 实现 ， 为 了 方便 阅读 我 们 对 代码 进行 了 排版 : 


if (!Function.prototype.bind) { 
Function.prototype.bind = function(oThis) { 
if (typeof this !-- "function") { 

// 5 ECMAScript 5 最 接近 的 

// 内 部 IsCallable 函数 

throw new TypeError( 
"Function.prototype.bind - what is trying " + 
"to be bound is not callable" 
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J; 
} 


var aArgs = Array.prototype.slice.call( arguments, 1 ), 
fToBind = this, 
fNOP = function(){}, 
fBound = function(){ 
return fToBind.apply( 
( 
this instanceof fNOP && 
oThis ? this : oThis 
J> 
aArgs.concat( 
Array.prototype.slice.call( arguments ) 


) ; 


fNOP.prototype = this.prototype; 
fBound.prototype - new fNOP(); 


return fBound; 


a 


这 种 bind(..) 是 一 种 polyfill 代码 (polyfill site 4k (P1555 ii Eh) t gg HH AIR 
F, polyfill 代码 主要 用 于 旧 浏 览 器 的 兼容 ， 比 如 说 在 旧 的 浏览 器 中 并 没 
AAE bind 函数 ， 因 此 可 以 使 用 polyfill 代码 在 旧 浏 览 器 中 实现 新 的 功 
能 )， 对 于 new 使 用 的 硬 绑 定 函数 来 说 ， 这 段 polyfill 代码 和 ES5 内 置 的 
bind(..) 函数 并 不 完全 相同 (后面 会 介绍 为 什么 要 在 new 中 使 用 硬 绑 定 国 
数 )。 由 于 polyfill 并 不 是 内 置 函 数 ， 所 以 无 法 创建 一 个 不 包含 .prototype 
的 函数 ， 因 此 会 具有 一 些 副作用 。 如 果 你 要 在 new 中 使 用 硬 绑 定 函数 并 且 依 
di polyfill 代码 的 话 ， 一 定 要 非常 小 心 。 



















































































zi 


下 是 new 修改 this 的 相关 代码 : 











this instanceof fNOP && 
oThis ? this : oThis 


I]. 以 及 : 


fNOP.prototype = this.prototype; 
fBound.prototype - new fNOP(); 


我 们 并 不 会 详细 解释 这 段 代码 做 了 什么 (这 非常 复杂 并 且 不 在 我 们 的 讨论 范围 之 内 )， 不 
过 简单 来 说 ， 这 段 代 码 会 判断 硬 绑 定 国 数 是 否 是 被 new 调用 ， 如 果 是 的 话 就 会 使 用 新 创建 
的 this 替换 硬 绑 定 的 this, 








那么 ， 为 什么 要 在 new 中 使 用 硬 绑 定 国 数 呢 ? 直接 使 用 普通 函数 不 是 更 简单 吗 ? 


之 所 以 要 在 new 中 使 用 硬 绑 定 国 数 ， 主 要 目的 是 预先 设置 国 数 的 一 些 参 数 ， 这 样 在 使 用 
new 进行 初始 化 时 就 可 以 只 传 入 其 余 的 参数 。bind(..) 的 功能 之 一 就 是 可 以 把 除了 第 一 个 
参数 〈 第 一 个 参数 用 于 绑 定 this) 之 外 的 其 他 参数 都 传 给 下 层 的 函数 (这 种 技术 称 为 “部 
分 应 用 ”， 是 “ 柯 里 化 ”的 一 种 )。 举 例 来 说 : 








function foo(p1,p2) ( 
this.val = p1 + p2; 
} 


// 之 所 以 使 用 null 是 因为 在 本 例 中 我 们 并 不 关心 硬 绑 定 的 this 是 什么 
// 反正 使 用 new 时 this 会 被 修改 
var bar = foo.bind( null, "pi" ); 























var baz - new bar( "p2" ); 


baz.val; // pip2 


判断 this 
现在 我 们 可 以 根据 优先 级 来 判断 函数 在 某 个 调用 位 置 应 用 的 是 哪 条 规则 。 可 以 按照 下 面 的 
顺序 来 进行 判断 : 


1. 函数 是 否 在 new 中 调用 (new 绑 定 ) ? 如果 是 的 话 this 绑 定 的 是 新 创建 的 对 象 。 


var bar = new foo() 




















2. 函数 是 否 通过 call, apply 〈 显 式 绑 定 ) 或 者 硬 绑 定 调用 ? 如 果 是 的 话 ，this 绑 定 的 是 
指定 的 对 象 。 


var bar = foo.call(obj2) 
3. 函数 是 否 在 某 个 上 下 文 对 象 中 调用 (ARAE) ? 如 果 是 的 话 ，this 绑 定 的 是 那个 上 
下 文 对 象 。 
var bar = obj1.foo() 
4 如果 都 不 是 的 话 ,， 使 用 默认 绑 定 。 如 果 在 严格 模式 下 ， 就 绑 定 到 undefined, 否则 绑 定 到 
全 局 对 象 。 


var bar = foo() 





就 是 这 样 。 对 于 正常 的 函数 调用 来 说 ， 理 解 了 这 些 知识 你 就 可 以 明白 this 的 绑 定 原理 了 。 
不 过 …… 凡 事 总 有 例外 。 


2.4 绑 定 例外 
规则 总 有 例外 ， 这 里 也 一 样 。 
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在 某 些 场景 下 this 的 绑 定 行为 会 出 乎 意料 ， 你 认为 应 当 应 用 其 他 绑 定 规则 时 ， 实 际 上 应 用 
的 可 能 是 默认 绑 定 规则 。 


2.4.1 被 忽略 的 this 
如 果 你 把 null 或 者 undefined 作为 this 的 绑 定 对 象 传 人 call, apply 或 者 btnd， 这 些 值 
在 调用 时 会 被 包 略 ， 实 际 应 用 的 是 默认 绑 定 规则 : 
function foo() { 
console.log( this.a ); 
} 
var a = 2; 
foo.call( null ); // 2 
那么 什么 情况 下 你 会 传 入 null Ve? 
一 种 非常 第 见 的 做 法 是 使 用 apply(..) 来 “展开 ”一 个 数组 ， 并 当 作 参数 传 入 一 个 函数 。 
类 似 地 ，bind(..) 可 以 对 参数 进行 柯 里 化 (预先 设置 一 些 参数 )， 这 种 方法 有 时 非常 有 用 : 
function foo(a,b) { 
console.log( "a:" +a +", b:" +b ); 


} 


// 把 数组 “展开 ”成 参数 
foo.apply( null, [2, 3] ); // a:2, b:3 











// 使 用 bind(..) 进行 柯 里 化 
var bar = foo.bind( null, 2 ); 
bar( 3 ); // a:2, b:3 








这 两 种 方法 都 需要 传人 一 个 参数 当 作 this 的 绑 定 对 象 。 如 果 国 数 并 不 关心 this 的 话 ， 你 
仍然 需要 传人 一 个 占 位 值 ， 这 时 nutl 可 能 是 一 个 不 错 的 选择 ， 就 像 代码 所 示 的 那样 。 








尽管 本 书 中 未 提 到 ， 但 在 ES6 中 ， 可 以 用 ... HEIRE appLy(..) 来 “ 展 
开 ” 数 组 ，foo(...[1,2]) fH foo(1,2) 是 一 样 的 ， 这 样 可 以 避免 不 必要 的 
this 绑 定 。 可 惜 ， 在 ES6 中 没有 柯 里 化 的 相关 语法 ， 因 此 还 是 需要 使 用 
bind(..), 





























然而 ， 总 是 使 用 nuLL 来 忽略 this 绑 定 可 能 产生 一 些 副作用 。 如 果 某 个 函数 确实 使 用 了 
this 〈 比 如 第 三 方 库 中 的 一 个 国 数 ) ， 那 默认 绑 定 规则 会 把 this 绑 定 到 全 局 对 象 在 浏览 
器 中 这 个 对 象 是 window), ， 这 将 导致 不 可 预计 的 后 果 (比如 修改 全 局 对 象 )。 














显而易见 ， 这 种 方式 可 能 会 导致 许多 难以 分 析 和 追踪 的 bug, 
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更 安全 的 this 

一 种 “更 安全 ”的 做 法 是 传 入 一 个 特殊 的 对 象 ， 把 this 绑 定 到 这 个 对 象 不 会 对 你 的 程序 
产生 任何 副作用 。 就 像 网 络 (以 及 军队 ) 一 样 ， 我 们 可 以 创建 一 个 “DMZ” (demilitarized 
zone， 非 军事 区 ) 对 象 一 一 它 就 是 一 个 空 的 非 委 托 的 对 象 (委托 在 第 5 章 和 第 6 ENA). 


如 果 我 们 在 忽略 this 绑 定 时 总 是 传人 一 个 DMZ 对 象 ， 那 就 什么 都 不 用 担心 了 ， 因 为 任何 
对 于 this 的 使 用 都 会 被 限制 在 这 个 空 对 象 中 ， 不 会 对 全 局 对 象 产 生 任何 影响 。 


由 于 这 个 对 象 完 全 是 一 个 空 对 象 ， 我 自己 喜欢 用 变量 名 jg (这 是 数学 中 表示 空 集合 符号 的 
小 写 形式 ) 来 表示 它 。 在 大 多 数 键盘 (比如 说 Mac 的 US 布局 键盘 ) 上 都 可 以 使 用 ~ +o 
(Option-o) 来 打出 这 个 符号 。 有 些 系 统 允 许 你 为 特殊 符号 设 定 快捷 键 。 如 果 你 不 喜欢 5 Tf 
号 或 者 你 的 键盘 不 太 容 易 打 出 这 个 符号 ， 那 你 可 以 换 一 个 喜欢 的 名 字 来 称呼 它 。 


无 论 你 叫 它 什么 ， 在 JavaScript 中 创建 一 个 空 对 象 最 简单 的 方法 都 是 0bject.create(null) 
(详细 介绍 请 看 第 5 $$), Object.create(null) fü O 很 像 ， 但 是 并 不 会 创建 0bject. 
prototype 这 个 委托 MEE 们 “更 空 ”: 











function foo(a,b) f 
console.log( "a:" +a + ", b:" + b ); 


} 
// 我 们 的 DMZ 空 对 象 


var ø = Object.create( null ); 


// 把 数组 展开 成 参数 
foo.apply( ø, [2, 3] ); // a:2, b:3 


// 使 用 bind(..) 进行 柯 里 化 
var bar = foo.bind( 2, 2 ); 
bar( 3 ); // a:2, b:3 


使 用 变量 名 8g 不仅 让 函数 变 得 更 加 “安全 ， 而 且 可 以 提高 代码 的 可 读 性 ， 因 为 g% 表 示 
“我 希望 this 是 空 ”， 这 上 比 null 的 含义 更 清楚 。 不 过 再 说 一 遍 ， 你 可 以 用 任何 喜欢 的 名 字 
来 命名 DMZ 对象 。 








2.4.2 间接 引用 
另 一 个 需要 注意 的 是 ， 你 有 可 能 (有 意 或 者 无 意 地 ) 创建 一 个 函数 的 “间接 引用 ”， 在 这 
种 情况 下 ， 调 用 这 个 国 数 会 应 用 默认 绑 定 规则 。 


间接 引用 最 容易 在 赋值 时 发 生 : 





function foo() { 
console.log( this.a ); 


} 
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o.foo(); // 3 

(p.foo = o.foo)(); // 2 
赋值 表达 式 p.foo = o.foo 的 返回 值 是 目标 国 数 的 引用 ， 因 此 调用 位 置 是 foo() 而 不 是 
p.foo() 或 者 o.foo()。 根 据 我 们 之 前 说 过 的 ， 这 里 会 应 用 默认 绑 定 。 
注意 : 对 于 默认 绑 定 来 说 ， 决 定 this 绑 定 对 象 的 并 不 是 调用 位 置 是 否 处 于 严格 模式 ， 而 是 
函数 体 是 否 处 于 严格 模式 。 如 果 函 数 体 处 于 严格 模式 ，this 会 被 绑 定 到 undefined, ANI 
this 会 被 绑 定 到 全 局 对 象 。 


2.4.3 KHE 

之 前 我 们 已 经 看 到 过 ， 硬 绑 定 这 种 方式 可 以 把 this 强制 绑 定 到 指定 的 对 象 (除了 使 用 new 
时 )， 防 止 函 数 调用 应 用 默认 绑 定 规则 。 问 题 在 于 ， 硬 绑 定 会 大 大 降低 函数 的 灵活 性 ， 使 
用 硬 绑 定之 后 就 无 法 使 用 隐 式 绑 定 或 者 显 式 绑 定 来 修改 this, 


如 果 可 以 给 默认 绑 定 指定 一 个 全 局 对 象 和 undefined 以 外 的 值 ， 那 就 可 以 实现 和 硬 绑 定 相 
同 的 效果 ， 同 时 保留 隐 式 绑 定 或 者 显 式 绑 定 修改 this 的 能 


可 以 通过 一 种 被 称 为 软 绑 定 的 方法 来 实现 我 们 想 要 的 效果 : 


























if (!Function.prototype.softBind) { 
Function.prototype.softBind = function(obj) { 
var fn = this; 
// WARMA curried 参数 
var curried = [].slice.call( arguments, 1 ); 
var bound = function() { 
return fn.apply( 
(!this || this === (window || global)) ? 
obj : this 
curried.concat.apply( curried, arguments ) 
5 
5 
bound.prototype - Object.create( fn.prototype ); 
return bound; 
5 
} 


除了 软 绑 定之 外 ，softBind(..) 的 其 他 原理 和 ES5 内 置 的 btnd(..) 类 似 。 它 会 对 指定 的 函 
数 进行 封装 ， 首 先 检查 调用 时 的 this, Am this 绑 定 到 全 局 对 象 或 者 undefined， 那 就 把 
间 定 的 默认 对 象 obj 绑 定 到 this， 否 则 不 会 修改 thts。 此 外 ， 这 段 代 码 还 支持 可 选 的 柯 里 
化 (详情 请 查看 之 前 和 bindC. .) 相关 的 介绍 ) 。 





























下 面 我 们 看 看 softBind 是 否 实现 了 软 绑 定 功 能 ， 


7 





function foo() { 

console.log("name: " + this.name); 
} 
var obj = { name: "obj" }, 

obj2 = { name: "obj2" }, 

obj3 = { name: "obj3" }; 
var foo0BJ = foo.softBind( obj ); 
fooO0BJ(); // name: obj 


obj2.foo = foo.softBind(obj); 
obj2.foo(); // name: obj2 «---- 看 ! ! ! 


foo0BJ.call( obj3 ); // name: obj3 «---- 看 ! 


setTimeout( obj2.foo, 10 ); 
// name: obj «---- 应 用 了 软 绑 定 


可 以 看 到 ， 软 绑 定 版 本 的 foo() 可 以 手动 将 this 绑 定 到 obj2 或 者 obj3 上 ,但 如 果 应 用 默 
WE, NAE this 绑 定 到 obj, 

















2.5 this 词法 
我 们 之 前 介绍 的 四 条 规则 已 经 可 以 包含 所 有 正常 的 函数 。 但 是 ES6 中 介绍 了 一 种 无 法 使 用 
这 些 规则 的 特殊 函数 类 型 :箭头 函数 。 


箭头 图 数 并 不 是 使 用 function 关键 字 定 义 的 ， 而 是 使 用 被 称 为 “ 胖 箭头 ”的 操作 符 => AE 
义 的 。 箭 头 函 数 不 使 用 this 的 四 种 标准 规则 ， 而 是 根据 外 层 (函数 或 者 全 局 ) 作用 域 来 决 
定 this, 








我 们 来 看 看 箭头 函数 的 词法 作用 域 ， 


function foo() { 
// 返回 一 个 箭头 函数 
return (a) => ( 
/[this 继承 自 foo() 


console.log( this.a ); 


IE 

} 

var obji- ( 
a:2 

js 

var obj2 - ( 
2:3 
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J; 


var bar = foo.call( obj1 ); 
bar.call( obj2 ); // 2, 不 是 31 





foo() 内 部 创建 的 箭头 国 数 会 捕获 调用 时 foo() 的 this, HF fooO 的 this 绑 定 到 ob31, 
bar 《引用 箭头 函数 ) 的 this 也 会 绑 定 到 objl， 箭 头 函 数 的 绑 定 无 法 被 修改 。(new 也 不 
行 ! ) 


第 头 函 数 最 常用 于 回调 函数 中 ， 例 如 事件 处 理 器 或 者 定时 器 : 





function foo() { 
setTimeout(() => { 
// 这 里 的 this 在 此 法 上 继承 自 foo() 


console.log( this.a ); 








3,100); 
} 
var obj = ( 
a:2 
E 


foo.call( obj ); // 2 
箭头 函数 可 以 像 btnd(..) 一 样 确保 函数 的 this 被 绑 定 到 指定 对 象 ， 此 外 ， 其 重要 性 还 体 


现在 它 用 更 常见 的 词法 作用 域 取代 了 传统 的 this 机 制 。 实 际 上 ， 在 ES6 之 前 我 们 就 已 经 
在 使 用 一 种 几乎 和 筋 头 了 国 数 完全 一 样 的 模式 。 








function foo() { 
var self - this; // lexical capture of this 
setTimeout( function()f 
console.log( self.a ); 
), 100 ); 
} 


var obj = ( 
d: 2 
J 
foo.call( obj ); // 2 
虽然 seLf = this 和 箭头 函数 看 起 来 都 可 以 取代 btnd(..)， 但 是 从 本 质 上 来 说 ， 它 们 想 替 
代 的 是 this 机 制 。 


如 果 你 经 常 编写 this 风格 的 代码 ， 但 是 绝 大 部 分 时 候 都 会 使 用 self = this 或 者 箭头 国 数 
来 否定 this 机 制 ， 那 你 或 许 应 当 : 


L 只 使 用 词法 作用 域 并 完全 抛弃 错误 this 风格 的 代码 ， 
2. 完全 采用 this 风格 ， 在 必要 时 使 用 bind(..)， 尽量 避 免 使 用 self = this 和 箭头 国 数 。 











A 
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当然 ， 包 含 这 两 种 代码 风格 的 程序 可 以 正常 运行 ， 但 是 在 同一 个 国 数 或 者 同一 个 程序 中 混 
合 使 用 这 两 种 风格 通常 会 使 代码 更 难 维护 ， 并 且 可 能 也 会 更 难 编写 。 








2.6 小结 


如 果 要 判断 一 个 运行 中 函数 的 this 绑 定 ， 就 需要 找到 这 个 函数 的 直接 调用 位 置 。 找 到 之 后 
就 可 以 顺序 应 用 下 面 这 四 条 规则 来 判断 this 的 绑 定 对 象 。 


1. 由 new 调用 ?” 绑 定 到 新 创建 的 对 象 。 

2. 由 call 或 者 apply (或 者 bind) 调用 ? 绑 定 到 指定 的 对 象 。 
3. 由 上 下 文 对 象 调 用 ? 绑 定 到 那个 上 下 文 对 象 。 

4. 默认 : 在 严格 模式 下 绑 定 到 undefined， 否 则 绑 定 到 全 局 对 象 。 




















一 定 要 注意 ， 有 些 调用 可 能 在 无 意 中 使 用 默认 绑 定 规则 。 如 果 想 “更 安全 ”地 忽略 this 2p 
定 ， 你 可 以 使 用 一 个 DMZ 对 象 ， 比 如 g = 0bject.create(nuLL)， 以 保护 全 局 对 象 。 


ES6 中 的 箭头 函数 并 不 会 使 用 四 条 标准 的 绑 定 规则 ， 而 是 根据 当前 的 词法 作用 域 来 决定 
this， 具 体 来 说 ， 箭 头 函 数 会 继承 外 层 函 数 调用 的 this WE (EW this 绑 定 到 什么 ) 3x 
其 实 和 ES6 之 前 代码 中 的 self = this 机 制 一 样 。 





this 全 面 解析 | 101 





在 第 1 章 和 第 2 章 中 ， 我 们 介绍 了 函数 调用 位 置 的 不 同 会 造成 this 绑 定 对 象 的 不 同 。 但 是 
对 象 到 底 是 什么 ， 为 什么 我 们 需要 绑 定 它们 呢 ? 本 章 会 详细 介绍 对 象 。 


3.1 语法 


对 象 可 以 通过 两 种 形式 定义 : 声明 (文字 ) 形式 和 构造 形式 。 








对 象 的 文字 语法 大 概 是 这 样 ， 





var myObj = { 
key: value 
IH sas 

DE 


构造 形式 大 概 是 这 样 : 


var myObj = new Object(); 
myObj.key = value; 


构造 形式 和 文字 形式 生成 的 对 象 是 一 样 的 。 唯 一 的 区 别 是 ， 在 文字 声明 中 你 可 以 添加 多 个 
键 / 值 对 ,但 是 在 构造 形式 中 你 必须 逐个 添加 属性 。 




















用 上 面 的 “构造 形式 ”来 创建 对 象 是 非常 少见 的 ， 一 般 来 说 你 会 使 用 文字 语 
法 ， 绝 大 多 数 内 置 对 象 也 是 这 样 做 的 ( 稍 后 解释 )。 
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3.2 ”类 型 
对 象 是 JavaScript 的 基础 。 在 JavaScript 中 一 共有 六 种 主要 类 型 (术语 是 “语言 类 型 ”) : 


e string 

* number 

e boolean 

e null 

e undefined 


e object 


注意 ， 简 单 基 本 类 型 (string, boolean, number, null 和 undefined) 本 身 并 不 是 对 象 。 
null 有 时 会 被 当 作 一 种 对 象 类 型 ， 但 是 这 其 实 只 是 语言 本 身 的 一 个 bug， 即 对 null 执行 
typeof null 时 会 返回 字符 串 "object"。' 实际 上 ，null 本 身 是 基本 类 型 。 

有 一 种 常见 的 错误 说 法 是 “JavaScript 中 万 物 皆 是 对 象 ”， 这 显然 是 错误 的 。 

实际 上 ，JavaScript 中 有 许多 特殊 的 对 象 子 类 型 ， 我 们 可 以 称 之 为 复杂 基本 类 型 。 

函数 就 是 对 象 的 一 个 子 类 型 (从 技术 角度 来 说 就 是 “可 调用 的 对 象 ”)。JavaScript 中 的 函 
数 是 “一 等 公民 ”， 因 为 它们 本 质 上 和 普通 的 对 象 一 样 (只 是 可 以 调用 )， 所 以 可 以 像 操 作 
其 他 对 象 一 样 操 作 函 数 ( 比 如 当 作 另 一 个 函数 的 参数 )。 

数组 也 是 对 象 的 一 种 类 型 ， 具 备 一 些 额 外 的 行为 。 数 组 中 内 容 的 组 织 方 式 比 一 般 的 对 象 要 


稍微 复杂 一 些 。 


内 置 对 象 
JavaScript 中 还 有 一 些 对 象 子 类 型 ,通常 被 称 为 内 置 对 象 。 有 些 内 置 对 象 的 名 字 看 起 来 和 
简单 基础 类 型 一 样 ， 不 过 实际 上 它们 的 关系 更 复杂 ， 我 们 稍 后 会 详细 介绍 。 

















* String 

e Number 

e Boolean 
e Object 

e Function 


e Array 











PE. 原理 是 这 样 的 ， 不 同 的 对 象 在 底层 都 表示 为 二 进 制 ， 在 JavaScript 中 二 进 制 前 三 位 都 为 0 的话 会 被 判 
断 为 object 类 型 , nutt 的 二 进 制 表示 是 全 0, 自然 前 三 位 也 是 0, 所 以 执行 typeof 时 会 返回 “object”。 
一 一 译 者 注 
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e Date 
e RegExp 


e Error 





这 些 内 置 对 象 从 表现 形式 来 说 很 像 其 他 语言 中 的 类 型 (type) 或 者 类 (class)， 比 如 Java 
中 的 String 类 。 


但 是 在 JavaScript 中 ， 它 们 实际 上 只 是 一 些 内 置 函 数 。 这 些 内 置 函数 可 以 当 作 构造 函数 
(由 new 产生 的 函数 调用 参见 第 2 章 ) 来 使 用 ， 从 而 可 以 构造 一 个 对 应 子 类 型 的 新 对 
象 。 举 例 来 说 : 








var strPrimitive = "I am a string"; 
typeof strPrimitive; // "string" 
strPrimitive instanceof String; // false 


var strObject - new String( "I am a string" ); 
typeof strObject; // "object" 
strObject instanceof String; // true 


// 检查 sub- type 对 象 

Object.prototype.toString.call( strObject ); // [object String] 
在 之 后 的 章节 中 我 们 会 详细 介绍 Object.prototype.toString... 是 如 何 工作 的 ， 不 过 简单 
来 说 ， 我 们 可 以 认为 子 类 型 在 内 部 借用 了 Object 中 的 toString) 方法 。 从 代码 中 可 以 看 
fj, strObject 是 由 String 构造 函数 创建 的 一 个 对 象 。 

















原始 值 "I am a string" 并 不 是 一 个 对 象 ， 它 只 是 一 个 字面 量 ， 并 且 是 一 个 不 可 变 的 值 。 
如 果 要 在 这 个 字面 量 上 执行 一 些 操作 ， 比 如 获取 长 度 、 访 问 其 中 基 个 字符 等 ， 那 需要 将 其 
转换 为 String 对 象 。 


幸好 ， 在 必要 时 语言 会 自动 把 字符 串 字 面 量 转换 成 一 个 String 对 象 ， 也 就 是 说 你 并 不 需要 
显 式 创建 一 个 对 象 。JavaScript 社区 中 的 大 多 数 人 都 认为 能 使 用 文字 形式 时 就 不 要 使 用 构 


造形 式 。 



































思 芳 下 面 的 代码 : 











var strPrimitive - "I am a string"; 
console.log( strPrimitive.length ); // 13 


console.log( strPrimitive.charAt( 3 ) ); // "m" 





使 用 以 上 两 种 方法 ， 我 们 都 可 以 直接 在 字符 串 字 面 量 上 访问 属性 或 者 方法 ， 之 所 以 可 以 这 
样 做 ， 是 因为 引擎 自动 把 字面 量 转换 成 String 对 象 ， 所 以 可 以 访问 属性 和 方法 。 


同样 的 事 也 会 发 生 在 数值 字面 量 上 ， 如 果 使 用 类 似 42.359.toFixed(2) 的 方法 ， 引 擎 会 把 









































A 
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42 转换 成 new Number(42)。 对 于 布尔 字面 量 来 说 也 是 如 此 。 





null 和 undefined 没有 对 应 的 构造 形式 ， 它 们 只 有 文字 形式 。 相 反 ，Date 只 有 构造 ， 没 有 
文字 形式 。 

对 于 Object, Array, Function 和 RegExp (正则 表达 式 ) 来 说 ， 无 论 使 用 文字 形式 还 是 构 
造形 式 ， 它 们 都 是 对 象 ， 不 是 字面 量 。 在 某 些 情况 下 ， 相 比 用 文字 形式 创建 对 象 ， 构 造形 
式 可 以 提供 一 些 额外 选项 。 由 于 这 两 种 形式 都 可 以 创建 对 象 ， 所 以 我 们 首选 更 简单 的 文字 
形式 。 建 议 只 在 需要 那些 额外 选项 时 使 用 构造 形式 。 











Error 对 象 很 少 在 代码 中 显 式 创建 ， 一 般 是 在 抛 出 异常 时 被 自动 创建 。 也 可 以 使 用 new 
Error(..) 这 种 构造 形式 来 创建 ， 不 过 一 般 来 说 用 不 着 。 


3.3 内容 


之 前 我 们 提 到 过 ， 对 象 的 内 容 是 由 一 些 存储 在 特定 命名 位 置 的 (任意 类 型 的 ) 值 组 成 的 ， 
我 们 称 之 为 属性 。 

需要 强调 的 一 点 是 ， 当 我 们 说 “内 容 ” 时 ， 似 乎 在 暗示 这 些 值 实际 上 被 存储 在 对 象 内 部 ， 
但 是 这 只 是 它 的 表现 形式 。 在 引擎 内 部 ， 这 些 值 的 存储 方式 是 多 种 多 样 的 ， 一 般 并 不 会 存 
在 对 象 容器 内 部 。 存 储 在 对 象 容器 内 部 的 是 这 些 属性 的 名 称 ， 它 们 就 像 指针 (从 技术 角度 
来 说 就 是 引用 ) 一 样 ， 指 向 这 些 值 真 正 的 存储 位 置 。 


思 萎 下 面 的 代码 : 





























var myObject = ( 
dt2 
B 


myObject.a; // 2 

myObject["a"]; // 2 
如 果 要 访问 myobject 中 a 位 置 上 的 值 ， 我 们 需要 使 用 . 操作 符 或 者 [] 操作 符 。.a 语法 通 
篆 被 称 为 “属性 访问 "，["a"] 语法 通常 被 称 为 “ 键 访问 ”"。 实 际 上 它们 访问 的 是 同一 个 位 
置 ， 并且 会 返回 相同 的 值 2， 所 以 这 两 个 术语 是 可 以 互 换 的 。 在 本 书 中 我 们 会 使 用 最 常见 
的 术语 “属性 访问 ”。 





这 两 种 语法 的 主要 区 别 在 于 . 操作 符 要 求 属性 名 满足 标识 符 的 命名 规范 ， 而 [".…"] 语法 
可 以 接受 任意 UTF-8/Unicode 字符 串 作 为 属性 名 。 举 例 来 说 ， 如 果 要 引用 名 称 为 "Super- 
Fun!" 的 属性 ， 那 就 必须 使 用 ["Super-Fun!"] 语法 访问 ， 因 为 Super-Fun! 并 不 是 一 个 有 效 
的 标识 符 属性 名 。 








此 外 ， 由 于 [".…"] 语法 使 用 字符 串 来 访问 属性 ， 所 以 可 以 在 程序 中 构造 这 个 字符 串 ， 比 如 说: 














var myObject - ( 
3:2 

E 

var idx; 

if (wantA) { 
idx = "a"; 

} 

// 之 后 


console.log( myObject[idx] ); // 2 





在 对 象 中 ， 属 性 名 永远 都 是 字符 串 。 如 果 你 使 用 string (字面 量 ) 以 外 的 其 他 值 作为 属性 
名 ， 那 它 首先 会 被 转换 为 一 个 字符 串 。 即 使 是 数字 也 不 例外 ， 虽 然 在 数组 下 标 中 使 用 的 的 
确 是 数字 ， 但 是 在 对 象 属性 名 中 数字 会 被 转换 成 字符 串 ， 所 以 当心 不 要 搞 混 对 象 和 数组 中 
数字 的 用 法 : 











var nyOobject = ( }; 


myObject[true] = "foo"; 
myObject[3] = "bar"; 
myObject[myObject] = "baz"; 


myObject["true"]; // "foo" 
myObject["3"]; // "bar" 
myObject["[object Object]"]; // "baz" 


3.331 可 计算 属性 名 

如 果 你 需要 通过 表达 式 来 计算 属性 名 ， 那 么 我 们 刚刚 讲 到 的 myobject[..] 这 种 属性 访问 语 
法 就 可 以 派 上 用 场 了 ， 如 可 以 使 用 myobject[prefix + name]。 但 是 使 用 文字 形式 来 声明 对 
象 时 这 样 做 是 不 行 的 。 





ES6 增加 了 可 计算 属性 名 ， 可 以 在 文字 形式 中 使 用 [] 包 事 一 个 表达 式 来 当 作 属 性 名 : 





var prefix = "foo"; 


var myObject = ( 
[prefix + "bar"]:"hello", 
[prefix + "baz"]: "world" 


h 


myObject["foobar"]; // hello 
myObject["foobaz"]; // world 


可 计算 属性 名 最 常用 的 场景 可 能 是 ES6 的 符号 《Symbol) ， 本 书 中 不 作 详 细 介绍 。 不 过 
简单 来 说 ， 它 们 是 一 种 新 的 基础 数据 类 型 ， 包含 一 个 不 透明 且 无 法 预测 的 值 ( 从 技术 
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角度 来 说 就 是 一 个 字符 串 )。 一 般 来 说 你 不 会 用 到 符号 的 实际 值 〈 因 为 理论 上 来 说 在 不 
同 的 JavaScript 引擎 中 值 是 不 同 的 )， 所 以 通常 你 接触 到 的 是 符号 的 名 称 ， 比 如 Symbol. 
Something (这 个 名 字 是 我 编 的 ) : 


var myObject = ( 
[Symbol.Something]: "hello world" 


3.8.2 属性 与 方法 

如 果 访 问 的 对 象 属性 是 一 个 函数 ， 有 些 开 发 者 喜欢 使 用 不 一 样 的 叫 法 以 作 区 分 。 由 于 函数 
很 容易 被 认为 是 属于 某 个 对 象 ， 在 其 他 语言 中 ， 属 于 对 象 (也 被 称 为 “类 ”) 的 函数 通常 
被 称 为 “方法 ”， 因 此 把 “属性 访问 ”说 成 是 “方法 访问 ”也 就 不 奇怪 了 。 

有 意思 的 是 ，JavaScript 的 语法 规范 也 做 出 了 同样 的 区 分 。 


从 技术 角度 来 说 ， 函 数 永远 不 会 “属于 ”一 个 对 象 ， 所 以 把 对 象 内 部 引用 的 函数 称 为 “ 方 
法 ”似乎 有 点 不 受 。 
确实 ， 有些 函数 具有 this 引用 ， 有 时候 这 些 this 确实 会 指向 调用 位 置 的 对 象 引 用 。 但 是 
这 种 用 法 从 本 质 上 来 说 并 没有 把 一 个 函数 变 成 一 个 “方法 ”"， 因 为 this 是 在 运行 时 根据 调 
用 位 置 动态 绑 定 的 ， 所 以 国 数 和 对 象 的 关系 最 多 也 只 能 说 是 间接 关系 。 

无 论 返 回 值 是 什么 类 型 ， 每 次 访问 对 象 的 属性 就 是 属性 访问 。 如 果 属 性 访问 返回 的 是 一 个 
函数 ， 那 它 也 并 不 是 一 个 “方法 "。 属 性 访问 返回 的 函数 和 其 他 函数 没有 任何 区 别 (除了 
可 能 发 生 的 隐 式 绑 定 this， 就 像 我们 刚才 提 到 的 )。 


举例 来 说 : 
































function foo() { 
console.log( "foo" ); 
} 
var someFoo = foo; // 对 foo 的 变量 引用 
var myObject = ( 
someFoo: foo 
IE 
foo; // function foo()(..J 
someFoo; // function foo(){..} 


myObject.someFoo; // function foo()[..) 





someFoo 和 myObject.someFoo 只 是 对 于 同一 个 国 数 的 不 同 引 用 ， 并 不 能 说 明 这 个 国 数 是 特 
别 的 或 者 “属于 ” 基 个 对 象 。 如 果 fool) 定义 时 在 内 部 有 一 个 this 引用 ， 那 这 两 个 函数 引 
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用 的 唯一 区 别 就 是 myObject.someFoo 中 的 this 会 被 隐 式 绑 定 到 一 个 对 象 。 无 论 哪 种 引用 
形式 都 不 能 称 之 为 “方法 ”。 


或 许 有 人 会 辩解 说 ， 函 数 并 不 是 在 定义 时 成 为 方法 ， 而 是 在 被 调用 时 根据 调用 位 置 的 不 同 
(是 否 具 有 上 下 文 对 象 一 一 详 见 第 2 章 ) 成 为 方法 。 即 便 如 此 ， 这 种 说 法 仍然 有 些 不 受 。 





最 保险 的 说 法 可 能 是 ,“ 国 数 ” 和 “方法 ”在 JavaScript 中 是 可 以 互 换 的 。 





ES6 增加 了 super 引用 ， 一 般 来 说 会 被 用 在 class 中 (参见 附录 A). super 
的 行为 似乎 更 有 理由 把 super 绑 定 的 国 数 称 为 “方法 "。 但 是 再 说 一 次 ， 这 
些 只 是 一 些 语义 (和 技术 ) 上 的 微妙 差别 ， 本 质 是 一 样 的 。 














即使 你 在 对 象 的 文字 形式 中 声明 一 个 函数 表达 式 ， 这 个 函数 也 不 会 “属于 ”这 个 对 象 一 一 
它们 只 是 对 于 相同 函数 对 象 的 多 个 引用 。 





var myObject = { 
foo: function() { 
console.log( "foo" ); 
} 
E 
var someFoo - myObject.foo; 


someFoo; // function foo(){..} 


myObject.foo; // function foo(){..} 


第 6 章 会 介绍 本 例 对 象 的 文字 形式 中 声明 函数 的 语法 ， 这 是 ESO 增加 的 一 种 
简易 函数 声明 语法 。 


3.3.3 ”数组 


数组 也 支持 [] 访问 形式 ， 不 过 就 像 我 们 之 前 提 到 过 的 ， 数 组 有 一 套 更 加 结构 化 的 值 存储 
机 制 (不 过 仍然 不 限制 值 的 类 型 )。 数 组 期 望 的 是 数值 下 标 ， 也 就 是 说 值 存储 的 位 置 G8 
常 被 称 为 索引 ) 是 整数 ， 比 如 说 0 和 42: 


var myArray = [ "foo", 42, "bar" ]; 
myArray.length; // 3 
myArray[0]; // "foo" 


myArray[2]; // "bar" 
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数组 也 是 对 象 ， 所 以 虽然 每 个 下 标 都 是 整数 ， 你 仍然 可 以 给 数组 添加 属性 : 
var myArray = [ "foo", 42, "bar" ]; 
myArray.baz = "baz"; 
myArray.length; // 3 
myArray.baz; // "baz" 
可 以 看 到 虽然 添加 了 命名 属性 (无 论 是 通过 . 语法 还 是 [] 语法 )， 数 组 的 Length 值 并 未 发 
生变 化 。 


你 完全 可 以 把 数组 当 作 一 个 普通 的 键 / 值 对 象 来 使 用 ， 并 且 不 添加 任何 数值 索引 ， 但 是 这 
并 不 是 一 个 好 主意 。 数 组 和 普通 的 对 象 都 根据 其 对 应 的 行为 和 用 途 进行 了 优化 ， 所 以 最 好 
只 用 对 象 来 存储 键 / 值 对 ， 只 用 数组 来 存储 数值 下 标 / 值 对 。 


注意 : 如 果 你 试图 向 数组 添加 一 个 属性 ， 但 是 属性 名 “看 起 来 ” 像 一 个 数字 ， 那 它 会 变 成 
一 个 数值 下 标 (因此 会 修改 数组 的 内 容 而 不 是 添加 一 个 属性 ) : 

















var myArray - [ "foo", 42, "bar" ]; 
myArray["3"] = "baz"; 
myArray.length; // 4 


myArray[3]; // "baz" 


3.89.4 复制 对 象 
JavaScript 初学 者 最 常见 的 问题 之 一 就 是 如 何 复制 一 个 对 象 。 看 起 来 应 该 有 一 个 内 置 的 copy() 
方法 ， 是 吧 ? 实际 上 事情 比 你 想象 的 更 复杂 ， 因 为 我 们 无 法 选择 一 个 默认 的 复制 算法 。 


function anotherFunction() ( /*..*/ ) 


var anotherObject - ( 
C: true 


IE 
var anotherArray - []; 


var myObject - ( 
ai- 2; 
b: anotherObject, // 引用 ， 不 是 复 本 ! 


c: anotherArray, // 另 一 个 引用 
d: anotherFunction 


h 

















anotherArray.push( anotherObject, myObject ); 
如 何 准确 地 表示 my0bject 的 复制 呢 ? 


首先 ， 我 们 应 该 判断 它 是 浅 复 制 还 是 深 复 制 。 对 于 浅 拷贝 来 说 ， 复 制 出 的 新 对 象 中 a 的 值 会 
复制 旧 对 象 中 a 的 值 ， 也 就 是 2， 但 是 新 对 象 中 b、c、d 三 个 属性 其 实 只 是 三 个 引用 ， 它 们 
和 旧 对 象 中 b、c、d 引用 的 对 象 是 一 样 的 。 对 于 深 复 制 来 说 ， 除 了 复制 myobject 以 外 还 会 复 
制 anotherObject 和 anotherArray。 这 时 问题 就 来 了 ，anotherArray 引用 了 anotherObject 和 
my0bject， 所 以 又 需要 复制 myobject， 这 样 就 会 由 于 循环 引用 导致 死 循环 。 




















我 们 是 应 该 检测 循环 引用 并 终止 循环 (不 复制 深层 元 素 ) ?还 是 应 当 直 接 报 错 或 者 是 选择 
其 他 方法 ? 





除 此 之 外 ， 我 们 还 不 确定 “复制 ”一 个 函数 意味 着 什么 。 有 些 人 会 通过 tostring() 来 序列 
化 一 个 函数 的 源 代码 (但 是 结果 取决 于 JavaScript 的 具体 实现 ， 而 且 不 同 的 引擎 对 于 不 同 
类 型 的 函数 处 理 方式 并 不 完全 相同 )。 


那么 如 何 解决 这 些 棘 手 问 题 呢 ? 许多 JavaScript 框架 都 提出 了 自己 的 解决 办 法 ， 但 是 
JavaScript 应 当 采 用 哪 种 方法 作为 标准 呢 ? 在 很 长 一 段 时 间 里 ， 这 个 问题 都 没有 明确 的 答案 。 








对 于 JSON 安全 (也 就 是 说 可 以 被 序列 化 为 一 个 JSON 字符 串 并 且 可 以 根据 这 个 字符 串 解 
析出 一 个 结构 和 值 完全 一 样 的 对 象 ) 的 对象 来 说 ， 有 一 种 巧妙 的 复制 方法 : 

var newObj = JSON.parse( JSON.stringify( someObj ) ); 
当然 ， 这 种 方法 需要 保证 对 象 是 JSON 安全 的 ， 所 以 只 适用 于 部 分 情况 。 
相 比 深 复制 ， 浅 复制 非常 易 懂 并 且 问 题 要 少 得 多 ， 所 以 ES6 定义 了 0bject.assign(..) 方 
法 来 实现 浅 复制 。0bject.assign(..) 方 法 的 第 一 个 参数 是 目标 对 象 ， 之 后 还 可 以 跟 一 个 
或 多 个 源 对 象 。 它 会 遍历 一 个 或 多 个 源 对 象 的 所 有 可 枚 举 (enumerable， 参 见 下 面 的 代码 ) 
的 自 有 键 (owned key， 很 快 会 介绍 ) 并 把 它们 复制 〈 使 用 = 操作 符 赋 值 ) 到 目标 对 象 ， 最 
后 返回 目标 对 象 ， 就 像 这 样 : 














var newObj = Object.assign( {}, myObject ); 


newObj.a; // 2 


newObj.b === anotherObject; // true 
newObj.c === anotherArray; // true 
newObj.d === anotherFunction; // true 


下 一 节 会 介绍 “属性 描述 符 ” 以 及 Object.defineProperty(..) 的 用 法 。 但 是 
需要 注意 的 一 点 是 ， 由 于 0bject.assign(..) 就 是 使 用 = 操作 符 来 赋值 ， 所 
以 源 对 象 属性 的 一 些 特性 (比如 writable) 不 会 被 复制 到 目标 对 象 。 
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3.3.5 ”属性 描述 符 
在 ES5 之 前 ，JavaScript 语言 本 身 并 没有 提供 可 以 直接 检测 属性 特性 的 方法 ， 比 如 判断 属 


性 是 否 是 只 读 。 











但 是 从 ES5 开始 ， 所 有 的 属性 都 具备 了 属性 描述 符 。 





思考 下 面 的 代码 : 

var myObject = { 
a:2 

Js 
Object.getOwnPropertyDescriptor( myObject, "a" ); 
// t 
HI value: 2, 
JJ writable: true, 
TI: enumerable: true, 
II configurable: true 
J/ 





如 你 所 见 ， 这 个 普通 的 对 象 属 性 对 应 的 属性 描述 符 (也 被 称 为 “数据 描述 符 ”， 因 为 它 
只 保存 一 个 数据 值 ) 可 不 仅仅 只 是 一 个 2。 它 还 包含 另外 三 个 特性 : writable (可 写 )、 
enumerable (可 枚 举 ) 和 configurable (可 配置 ) 。 














在 创建 普通 属性 时 属性 描述 符 会 使 用 默认 值 ， 我 们 也 可 以 使 用 Object.defineProperty(..) 
来 添加 一 个 新 属性 或 者 修改 一 个 已 有 属性 〈 如 果 它 是 configurable) 并 对 特性 进行 设置 。 


举例 来 说 : 





var myObject = {}; 


Object.defineProperty( myObject, "a", { 
value: 2, 
writable: true, 
configurable: true, 
enumerable: true 


J); 


myObject.a; // 2 








我 们 使 用 defineProperty(..) 给 myobject 添加 了 一 个 普通 的 属性 并 显 式 指定 了 一 些 特性 。 
然而 ， 一 般 来 说 你 不 会 使 用 这 种 方式 ， 除 非 你 想 修改 属性 描述 符 。 


1. Writable 
writable 决定 是 否 可 以 修改 属性 的 值 。 
思考 下 面 的 代码 : 

















var nyObject = {}; 


Object.defineProperty( myObject, "a", { 
value: 2, 
writable: false, // 不 可 写 ! 
configurable: true, 
enumerable: true 


)» 
myObject.a = 3; 


myObject.a; // 2 

















如 你 所 见 ， 我 们 对 于 属性 值 的 修改 静默 失败 (silently failed) 了 。 如 果 在 严格 模式 下 ， 这 
种 方法 会 出 错 : 











"use strict"; 
var myObject = {}; 


Object.defineProperty( myObject, "a", { 
value: 2, 
writable: false, // 不 可 写 ! 
configurable: true, 
enumerable: true 


F; 


myObject.a = 3; // TypeError 


TypeError 错误 表示 我 们 无 法 修改 一 个 不 可 写 的 属性 。 

















之 后 我 们 会 介绍 getter 和 setter， 不 过 简单 来 说 ， 你 可 以 把 writable:false 看 
作 是 属性 不 可 改变 ， 相 当 于 你 定义 了 一 个 空 操作 setter。 严 格 来 说 ， 如 果 要 
和 writable:false 一 致 的 话 ， 你 的 setter 被 调用 时 应 当 抛 出 一 个 TypeError 
错误 。 








2. Configurable 
只 要 属性 是 可 配置 的 ， 就 可 以 使 用 defineProperty(..) 方法 来 修改 属性 描述 符 ; 


var myObject = ( 
a:2 
J; 


myObject.a = 3; 
myObject.a; // 3 


Object.defineProperty( myObject, "a", { 
value: 4, 
writable: true, 
configurable: false, // 不 可 配置 ! 





PT 
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enumerable: true 


HE 


myObject.a; // 4 
myObject.a = 5; 
myObject.a; // 5 


Object.defineProperty( myObject, "a 
value: 6, 

writable: true, 

configurable: true, 

enumerable: true 


) 5 // TypeError 


5 { 


最 后 一 个 defineProperty(. 
试 修改 一 个 不 可 配置 的 属性 描述 
false 是 单 向 操作 ， 无 法 撤销 | 





符 都 会 出 错 。 注 意 : 


要 注意 有 一 个 小 小 的 例外 ; 
把 writable 的 状态 由 true 改 为 false, 











即便 属性 是 configurable:false, 


.) 会 产生 一 个 TypeError 错误 ， 不 管 是 不 是 处 于 严格 模式 ， 堂 
如 你 


所 见 ， 把 configurable 修改 成 


我 们 还 是 可 以 


但 是 无 法 由 false 改 为 true。 


除了 无 法 修改 ，configurable:false 还 会 禁止 删除 这 个 属性 : 


var myObject 
a:2 


{ 
IE 
myObject.a; // 2 


delete myObject.a; 
myObject.a; // undefined 


Object.defineProperty( myObject, "a 
value: 2, 

writable: true, 

configurable: false, 
enumerable: true 


F); 


3 { 


myObject.a; // 2 
delete myObject.a; 
myObject.a; // 2 


如 你 所 见 —^r delete 语句 (静默) 失败 了 ， 


在 本 例 中 ，detete 只 用 来 直接 删除 对 象 的 (可 删除 ) 属 
对 象 / 函数 的 最 后 一 个 引用 者 ， 对 这 个 属性 执行 











delete 操作 之 后 ， 


因为 属性 是 不 可 配置 的 。 


性 。 AUR RIS: RESO" 
这 个 未 引用 的 对 象 / ER 
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数 就 可 以 被 垃圾 回收 。 但 是 ， 不 要 把 delete 看 作 一 个 释放 内 存 的 工具 (就 像 C/C++ 中 那 
样 )， 它 就 是 一 个 删除 对 象 属性 的 操作 ， 仅 此 而 已 。 





3. Enumerable 


这 里 我 们 要 介绍 的 最 后 一 个 属性 描述 符 (还 有 两 个 ， 我 们 会 在 介绍 getter 和 setter 时 提 到 ) 


H 
是 enumerable, 


从 名 字 就 可 以 看 出 ， 这 个 描述 符 控制 的 是 属性 是 否 会 出 现在 对 象 的 属性 枚 举 中 ， 比 如 说 
Sume d a o RO 20 RP 
然 可 以 正常 访问 它 。 相 对 地 ， 设 置 成 true 就 会 让 它 出 现在 枚 举 中 。 























用 户 定义 的 所 有 的 普通 属性 默认 都 是 enumerable， 这 通常 就 是 你 想 要 的 。 但 是 如 果 你 不 
望 某 些 特殊 属性 出 现在 枚 举 中 ， 那 就 把 它 设置 成 enumerable:false。 


稍 后 我 们 会 详细 介绍 可 枚 举 性 ， 这 里 先 提 示 一 下 。 








3.3.6 不 变性 


有 了 时 候 你 会 希望 属性 或 者 对 象 是 不 可 改变 (无 论 有 意 还 是 无 意 ) 的 ， 在 ES5 中 可 以 通过 很 
多 种 方法 来 实现 。 


很 重要 的 一 点 是 ， 所 有 的 方法 创建 的 都 是 浅 不 变形 ， 也 就 是 说 ， 它 们 只 会 影响 目标 对 象 和 
o 如 果 目 标 对 象 引用 了 其 他 对 象 〈 数 组、 对 象 、 国 数 ， 等 )， 其 他 对 象 的 内 
不 受 影响 ， 仍 然 是 可 变 的 : 





























myImmutableObject.foo; // [1,2,3] 
myImmutableObject.foo.push( 4 ); 
myImmutableObject.foo; // [1,2,3,4] 


假设 代码 中 的 myImmutableobject 已 经 被 创建 而 且 是 不 可 变 的 ， 但 是 为 了 保护 它 的 内 容 
myImmutabLe0bject.foo， 你 还 需要 使 用 下 面 的 方法 让 foo 也 不 可 变 。 


在 JavaScript 程序 中 很 少 需要 深 不 可 变性 。 有 些 特 殊 情 况 可 能 需要 这 样 做 ， 
但 是 根据 通用 的 设计 模式 ， 如 果 你 发 现 需要 密封 或 者 冻结 所 有 的 对 象 ， 那 
你 或 许 应 当 退 一 步 ， 重 新 思考 一 下 程序 的 设计 ， 让 它 能 更 好 地 应 对 对 象 值 
的 改变 。 








1. 对 象 常量 
结合 writable:false 和 configurable:false 就 可 以 创建 一 个 真正 的 常量 属性 (不 可 修改 、 
重 定义 或 者 删除 ) : 





var myObject = (3; 


Object.defineProperty( myObject, "FAVORITE NUMBER", { 
value: 42, 
writable: false, 
configurable: false 


}); 


2. 禁止 扩展 
如 果 你 想 禁 止 一 个 对 象 添 加 新 属性 并 且 保 留 已 有 属性 ， 可 以 使 用 object.prevent 


Extensions(..): 








var myObject - ( 
a:2 
E 


Object.preventExtensions( myObject ); 


myObject.b = 3; 
myObject.b; // undefined 


在 非 严格 模式 下 ， 创 建 属 性 b 会 静默 失败 。 在 严格 模式 下 ， 将 会 抛 出 TypeError 错误 。 


3. 密封 
0bject.seal(..) 会 创建 一 个 “密封 ”的 对 象 ， 这 个 方法 实际 上 会 在 一 个 现 有 对 象 上 调用 
Object.preventExtensions(..) 并 把 所 有 现 有 属性 标记 为 configurable:false。 








所 以 ， 密 封 之 后 不 仅 不 能 添加 新 属性 ， 也 不 能 重新 配置 或 者 删除 任何 现 有 属性 (虽然 可 以 
修改 属性 的 值 ) 。 


4. 冻结 

Object.freeze(..) 会 创建 一 个 冻结 对 象 ， 这 个 方法 实际 上 会 在 一 个 现 有 对 象 上 调用 
Object.seal(..) 并 把 所 有 “数据 访问 ”属性 标记 为 writable:false， 这 样 就 无 法 修改 它们 
的 值 。 











这 个 方法 是 你 可 以 应 用 在 对 象 上 的 级 别 最 高 的 不 可 变性 ， 它 会 禁止 对 于 对 象 本 身 及 其 任意 
直接 属性 的 修改 (不 过 就 像 我 们 之 前 说 过 的 ， 这 个 对 象 引 用 的 其 他 对 象 是 不 受 影响 的 )。 











你 可 以 “深度 冻结 ”一 个 对 象 ， 具 体 方法 为 ， 首 先 在 这 个 对 象 上 调用 0bject.freezel..)， 
然后 遍历 它 引 用 的 所 有 对 象 并 在 这 些 对 象 上 调用 0bject.freeze(..)。 但 是 一 定 要 小 心 ， 因 
为 这 样 做 有 可 能 会 在 无 意 中 冻 结 其 他 (共享 ) 对 象 。 





3.3.7 [[Get]] 
属性 访问 在 实现 时 有 一 个 微妙 却 非常 重要 的 细节 ， 思 考 下 面 的 代码 ; 





var myObject = ( 
a: 2 
h 


myObject.a; // 2 
myObject.a 是 一 次 属性 访问 ， 但 是 这 条 语句 并 不 仅仅 是 在 my0bjet 中 查找 名 字 为 a 的 属性 ， 
虽然 看 起 来 好 像 是 这 样 。 


在 语言 规范 中 ，my0bject.a 在 my0bject 上 实际 上 是 实现 了 [[Get]] 操作 (有 点 像 函 数 调 
H: [[Get]]())。 对 象 默 认 的 内 置 [[Get]] 操作 首先 在 对 象 中 查找 是 否 有 名 称 相同 的 属性 ， 
如 果 找 到 就 会 返回 这 个 属性 的 值 。 























然而 ， 如 果 没 有 找到 名 称 相同 的 属性 ， PAEA a 执行 另外 一 种 非常 重要 
的 行为 。 我 们 会 在 第 5 章 中 介绍 这 个 行为 (其 实 就 是 遍历 可 能 存在 的 [[Prototype]] f£, 
也 就 是 原型 链 )。 

















如 果 无 论 如 何 都 没有 找到 名 称 相同 的 属性 ， 那 [[Get]] 操作 会 返回 值 undefined: 





var myObject = ( 
a:2 
h 


myObject.b; // undefined 

















注意 ， 这 种 方法 和 访问 变量 时 是 不 一 样 的 。 如 果 你 引用 了 一 个 当前 词法 作用 域 中 不 存在 的 
变量 ， 并 不 会 像 对 象 属 性 一 样 返回 undefined， 而 是 会 抛 出 一 个 ReferenceError 异常 : 








iN 


var myObject - ( 
a: undefined 
5 
myObject.a; // undefined 
myObject.b; // undefined 
从 返回 值 的 角度 来 说 ， 这 
看 之 下 没什么 区 别 ， 实 际 上 底层 的 [[Get]] 操作 对 myobject.b 进行 了 更 复杂 的 处 理 。 








尽管 在 





由 于 仅 根 据 返回 值 无 法 判断 出 到 底 变量 的 值 为 undefined 还 是 变量 不 存在 ， 所 以 [[Get]] 
操作 返回 了 undefined。 不 过 稍 后 我 们 会 介绍 如 何 区 分 这 两 种 情况 











3.3.8 [[Put]] 
既然 有 可 以 获取 属性 值 的 [[Get]] 操作 ， 就 一 定 有 对 应 的 [[Put]] 操作 。 


你 可 能 会 认为 给 对 象 的 属性 赋值 会 触发 [[Put]] 来 设置 或 者 创建 这 个 属性 。 但 是 实际 情况 





并 不 完全 是 这 样 。 
[[Put]] 被 触发 时 ， 实 际 的 行为 取决 于 许多 因素 ， 包 括 对 象 中 是 否 已 经 存在 这 个 属性 (这 
是 最 重要 的 因素 )。 

如 果 已 经 存在 这 个 属性 ，[[Put]] 算法 大 臻 会 检查 下 面 这 些 内 容 


1. 属性 是 否 是 访问 描述 符 (参见 3.3.9 节 ) ? 如 果 是 并 且 存 在 setter 就 调用 setter, 

2. 属性 的 数据 描述 符 中 writable 是 否 是 false? 如 果 是 ， 在 非 严格 模式 下 静默 失败 ， 在 
严格 模式 下 抛 出 TypeError 异常 。 

3. 如 果 都 不 是 ， 将 该 值 设置 为 属性 的 值 。 















































te A [[Put]] 操作 会 更 加 复杂 。 我 们 会 在 第 5 章 讨论 [[Prototype]] 
时 详细 进行 介 


3.3.9 Getter 和 Setter 
对 象 默 认 的 [[Put]] 和 [[Get]] 操作 分 别 可 以 控制 属性 值 的 设置 和 获取 。 





在 语言 的 未 来 / 高 级 特性 中 ， 有 可 能 可 以 改写 整个 对 象 (不 仅仅 是 某 个 属性 ) 
的 默认 [[Get]] 和 [[Put]] 操作 。 这 已 经 超出 了 本 书 的 讨论 范围 ， 但 是 将 来 
“你 不 知道 的 JavaScript” 系 列 从 书 中 有 可 能 会 对 这 个 问题 进行 探讨 。 

















在 ES5 中 可 以 使 用 getter 和 setter 部 分 改写 默认 操作 ， 但 是 只 能 应 用 在 单个 属性 上 ， 无 法 
应 用 在 整个 对 象 上 。getter 是 一 个 隐藏 函数 ， 会 在 获取 属性 值 时 调用 。setter 也 是 一 个 隐藏 
函数 ， 会 在 设置 属性 值 时 调用 。 


当 你 给 一 个 属性 定义 getter、setter 或 者 两 者 都 有 时 ， 这 个 属性 会 被 定义 为 “访问 描述 
符 ”( 和 “数据 描述 符 ” 相 对 )。 对 于 访问 描述 符 来 说 ，JavaScript 会 忽略 它们 的 value 和 
writable 特性 ， 取 而 代 之 的 是 关心 set 和 get (还 有 configurable 和 enumerable) 特性 。 

















A875 PIBIBS RO; 








var myObject - ( 
// 给 a 定义 一 个 getter 
get a() ( 
return 2; 
} 


E 
Object.defineProperty( 


myObject, // 目标 对 象 
"b", 1/ 属性 名 











t // 描述 符 
// 给 b 设 置 一 个 getter 





get: function(){ return this.a * 2 }, 


|| 确保 b 会 出 现在 对 象 的 属性 列表 中 








enumerable: true 
} 
); 


myObject.a; // 2 


myObject.b; // 4 


不 管 是 对 象 文字 语法 中 的 get aO { .. J}, Wæ defineProperty(..) 中 的 显 式 定义 ， 二 者 
都 会 在 对 象 中 创建 一 个 不 包含 值 的 属性 ， 对 于 这 个 属性 的 访问 会 自动 调用 一 个 隐藏 函数 ， 














它 的 返回 值 会 被 当 作 属 性 访问 的 返回 值 : 








var myObject = { 
// 给 a 定义 一 个 getter 
get aO { 
return 2; 
} 


}; 
myObject.a = 3; 


myObject.a; // 2 


由 于 我 们 只 定义 了 a 的 getter， 所 以 对 a 的 值 进行 设置 时 set RESZARRERE, maU 


出 错误 。 而 且 即 便 有 合法 的 setter， 由 于 我 们 
没有 意义 的 。 


自 定 义 的 getter 





只 会 





返 





回 2， 所 以 set 操作 是 


为 了 让 属性 更 合理 ， 还 应 当 定 义 setter， 和 你 期 望 的 一 样 ，setter 会 覆盖 单个 属性 默认 的 
[[Put]] (也 被 称 为 赋值 ) 操作 。 通 常 来 说 getter 和 setter 是 成 对 出 现 的 (只 定义 一 个 的 话 





通常 会 产生 意料 之 外 的 行为 ) : 


var myObject = ( 
// 给 a 定义 一 个 getter 
get a() { 
return this. a ; 


}， 


// 给 a 定义 一 个 setter 
set a(val) { 
this. a = val*2; 
J 
E 


myObject.a = 2; 


myObject.a; // 4 





A 
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在 本 例 中 ， 实 际 上 我 们 把 赋值 ([[Put]]) 操作 中 的 值 2 存储 到 了 另 一 个 变量 
-a 中 。 名 称 -a_ 只 是 一 种 惯例 ， 没 有 任何 特殊 的 行为 一 一 和 其 他 普通 属性 
一 样 。 














3.3.10 “存在 性 

前 面 我 们 介绍 过 ， 如 my0bject.a 的 属性 访问 返回 值 可 能 是 undefined， 但 是 这 个 值 有 可 能 
是 属性 中 存储 的 undefined， 也 可 能 是 因为 属性 不 存在 所 以 返回 undefined。 那 么 如 何 区 分 
这 两 种 情况 呢 ? 

















我 们 可 以 在 不 访问 属性 值 的 情况 下 判断 对 象 中 是 否 存在 这 个 属性 : 


var myObject = ( 
a:2 
IE 


("a" in myObject); // true 
("b" in myObject); // false 


myObject.hasOwnProperty( "a" ); // true 
myObject.hasOwnProperty( "b" ); // false 


in 操作 符 会 检查 属性 是 否 在 对 象 及 其 [[Prototype]] 原型 链 中 (参见 第 5 章 )。 相 比 之 下 ， 
hasOwnProperty(..) 只 会 检查 属性 是 否 在 my0bject 对 象 中 ， 不 会 检查 [[Prototype]] fit, 
在 第 5 章 讲解 [[Prototype]] 时 我 们 会 详细 介绍 这 两 者 的 区 别 。 








所 有 的 普通 对 象 都 可 以 通过 对 于 0bject.prototype 的 委托 (参见 第 5 章 ) 来 访问 
hasOwnProperty(..)， 但 是 有 的 对 象 可 能 没有 连接 到 0bject.prototype (通过 Object. 
create(null) 来 创建 参见 第 5 章 )。 在 这 种 情况 下 ， 形 如 my0bejct.hasOwnProperty(..) 
就 会 失败 。 








这 时 可 以 使 用 一 种 更 加 强硬 的 方法 来 进行 判断 : Object.prototype.hasOwnProperty. 
call(my0bject,"a")， 它 借用 基础 的 hasownProperty(..) 方法 并 把 它 显 式 绑 定 (参见 第 2 
章 ) 到 my0bject E., 


看 起 来 in 操作 符 可 以 检查 容器 内 是 否 有 某 个 值 ， 但 是 它 实 际 上 检查 的 是 某 
个 属性 名 是 否 存在 。 对 于 数组 来 说 这 个 区 别 非 常 重要 ，4 in [2, 4, 618925 
果 并 不 是 你 期 待 的 True， 因 为 [2，4，6] 这 个 数组 中 包含 的 属性 名 是 0、1、 
2， 没 有 4。 














1. 枚 举 
之 前 介绍 enumerable 属性 描述 符 特性 时 我 们 简单 解释 过 什么 是 “可 枚 举 性 ”， 现 在 详细 介 
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绍 一 下 : 
var nyOobject = ( }; 


Object.defineProperty( 
myObject, 





3, 
// 让 a 像 普通 属性 一 样 可 以 枚 举 
{ enumerable: true, value: 2 } 


) ; 


Object.defineProperty( 

myObject, 

"b", 

// 让 b 不 可 枚 举 

{ enumerable: false, value: 3 } 


); 
myObject.b; // 3 


("b" in myObject); // true 
myObject.hasOwnProperty( "b" ); // true 


for (var k in myObject) { 
console.log( k, myObject[k] ); 


TET 
可 以 看 到 ，myobject.b 确实 存在 并 且 有 访问 值 ， 但 是 却 不 会 出 现在 for..in 循环 中 (尽管 


可 以 通过 in 操作 符 来 判断 是 否 存在 )。 原 因 是 “可 枚 举 ” 就 相当 于 “可 以 出 现在 对 象 属性 
的 遍历 中 ”。 











在 数组 上 应 用 for..in 循环 有 时 会 产生 出 人 意料 的 结果 ， 因 为 这 种 枚 举 不 
仅 会 包含 所 有 数值 索引 ， 还 会 包含 所 有 可 枚 举 属性 。 最 好 只 在 对 象 上 应 用 
for..in 循环 ， 如 有 果 要 过 历 数组 就 使 用 传统 的 for 循环 来 志 历 数值 索引 。 











也 可 以 通过 另 一 种 方式 来 区 分 属性 是 否 可 枚 举 : 





var myObject = { }; 


Object.defineProperty( 
myObject, 








a3, 
// 让 a 像 普通 属性 一 样 可 以 枚 举 
{ enumerable: true, value: 2 } 


J; 


Object.defineProperty( 





A 
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myObject, 

"b", 

// 让 b 不 可 枚 举 

{ enumerable: false, value: 3 } 


); 


myObject.propertyIsEnumerable( "a" ); // true 
myObject.propertyIsEnumerable( "b" ); // false 


Object.keys( myObject ); // ["a"] 
Object.getOwnPropertyNames( myObject ); // ["a", "b"] 





propertyIsEnumerable(..) 会 检查 给 定 的 属性 名 是 否 直接 存在 于 对 象 中 (而 不 是 在 原型 链 
E) 并 且 满 足 enumerable:true, 








Object.keys(..) 会 返回 一 个 数组 ， 包 含 所 有 可 枚 举 属性 ，0bject.getOwnPropertyNames(..) 
会 返回 一 个 数组 ， 包 含 所 有 属性 ， 无 论 它们 是 否 可 枚 举 。 








in 和 hasOwnProperty(..) 的 区 别 在 于 是 否 查 找 [[Prototype]] 链 ， 然 而 ，0bject.keys(..) 
和 0bject.getOwnPropertyNames(..) 都 只 会 查找 对 象 直 接 包含 的 属性 。 








(目前 ) 并 没有 内 置 的 方法 可 以 获取 in 操作 符 使 用 的 属性 列表 (对象 本 身 的 属性 以 
及 [[Prototype]] 链 中 的 所 有 属性 ， 参 见 第 5 章 )。 不 过 你 可 以 递归 遍历 某 个 对 象 的 整 条 
[[Prototype]] 链 并 保存 每 一 层 中 使 用 0bject.keys(..) 得 到 的 属性 列表 一 一 只 包含 可 枚 举 属性 。 


3.4 遍历 


for. in 循环 可 以 用 来 遍历 对 象 的 可 枚 举 属性 列表 (包括 [[Prototype]] 链 )。 但 是 如 何 遍 
历 属性 的 值 呢 ? 


对 于 数值 索引 的 数组 来 说 ， 可 以 使 用 标准 的 for 循环 来 遍历 值 : 




















var myArray = [1, 2, 3]; 


for (var i = 0; i < myArray.length; i++) { 
console.log( myArray[i] ); 


} 
// 123 





这 实际 上 并 不 是 在 所 历 值 ， 而 是 志 历 下 标 来 指向 值 ， 如 myArray[i]。 

ES5 中 增加 了 一 些 数组 的 辅助 迭代 器 ， 包 括 forEach(..)、every(..) 和 some(..)。 每 种 辅 
助 运 代 器 都 可 以 接受 一 个 回调 函数 并 把 它 应 用 到 数组 的 每 个 元 素 上 ， 唯 一 的 区 别 就 是 它们 
对 于 回调 函数 返回 值 的 处 理 方式 不 同 。 























forEach(..) 会 遍历 数组 中 的 所 有 值 并 忽略 回调 函数 的 返回 值 。every(.…) 会 一 直 运 行 直到 








回调 函数 返回 false (或 者 “ 假 ” 值 ) someC..) 会 一 直 运 行 直到 回调 函数 返回 true. (或 者 
“ 真 ” 值 )。 





every(..) 和 some(..) 中 特殊 的 返回 值 和 普通 for 循环 中 的 break 语句 类 似 ， 它 们 会 提前 
终 目 遍历 。 


使 用 for..in 遍历 对 象 是 无 法 直接 获取 属性 值 的 ， 因 为 它 实 际 上 遍历 的 是 对 象 中 的 所 有 可 
枚 举 属 性 ， 你 需要 手动 获取 属性 值 。 








遍历 数组 下 标 时 采用 的 是 数字 顺序 (for 循环 或 者 其 他 迭代 器 )， 但 是 遍历 对 
象 属性 时 的 顺序 是 不 确定 的 ， 在 不 同 的 JavaScript 引擎 中 可 能 不 一 样 。 因 此 ， 
在 不 同 的 环境 中 需要 保证 一 致 性 时 ， GERE ARUSEDDURCHISD WF. EL 
是 不 可 靠 的 。 





那么 如 何 直接 遍历 值 而 不 是 数组 下 标 (或 者 对 象 属性 ) We? 幸好 ，ES6 增加 了 一 种 用 来 遍 
历数 组 的 for. .of 循环 语法 〈 如 果 对 象 本 身 定义 了 迭代 器 的 话 也 可 以 遍历 对 象 ) : 


var myArray = [ 1, 2, 3 ]; 


for (var v of myArray) { 
console.log( v ); 


for. of JEA Ei Ab Zx In E D; TRE S8 d ok — Ar 3x f gROM ER. EA Je SE TR FH E FC AE T R A 
next() 方法 来 遍历 所 有 返回 值 。 


数组 有 内 置 的 @@iterator， 因 此 for..of 可 以 直接 应 用 在 数组 上 。 我 们 使 用 内 置 的 @@ 
iterator 来 手动 遍历 数组 ， 看 看 它 是 怎么 工作 的 : 








var myArray = [ 1, 2, 3 ]; 
var it = myArray[Symbol.iterator](); 


it.next(); // { value:1, done:false } 
it.next(); // { value:2, done:false } 
it.next(); // { value:3, done:false } 
it.next(); // { done:true } 


我 们 使 用 ES6 中 的 符号 Symbol. iterator 来 获取 对 象 的 @@iterator 内 部 属 
性 。 之 前 我 们 简单 介绍 过 符号 〈SymboL， 参 见 3.3.1 节 )， 跟 这 里 的 原理 是 相 
同 的 。 引 用 类 似 iterator 的 特殊 属性 时 要 使 用 符号 名 ， 而 不 是 符号 包含 的 
值 。 此 外 ， 虽 然 看 起 来 很 像 一 个 对 象 ， 但 是 @@iterator 本 身 并 不 是 一 个 返 代 
器 对 象 ， 而 是 一 个 返回 迭代 器 对 象 的 函数 一 一 这 点 非常 精妙 并 且 非 常 重要 。 
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Anf Br UL, JANEIRA nextO 方法 会 返回 形式 为 { value: .. , done: .. } 的 值 ， 
value 是 当前 的 遍历 值 ，done 是 一 个 布尔 值 ， 表 示 是 否 还 有 可 以 志 历 的 值 。 











注意 ， 和 值 “3” 一 起 返回 的 是 done:faLse， 乍 一 看 好 像 很 奇怪 ， 你 必须 再 调用 一 次 
next() 才能 得 到 done:true， 从 而 确定 完成 遍历 。 这 个 机 制 和 ES6 中 发 生 器 函数 的 语义 相 
关 ， 不 过 已 经 超出 了 我 们 的 讨论 范 目 

















pu 





o 





和 数组 不 同 ， 普 通 的 对 象 没有 内 置 的 @@iterator， 所 以 无 法 自动 完成 for..of 遍历 。 之 所 
以 要 这 样 做 ， 有 许多 非常 复杂 的 原因 ， 不 过 简单 来 说 ， 这 样 做 是 为 了 避免 影响 未 来 的 对 象 


当然 ， 你 可 以 给 任何 想 遍 历 的 对 象 定义 @@iterator ， 举 例 来 说 : 








var myObject = { 
dt 2, 
b: 3 

i 


Object.defineProperty( myObject, Symbol.iterator, { 
enumerable: false, 
writable: false, 
configurable: true, 
value: function() { 
var o = this; 
var idx = 0; 
var ks = Object.keys( o ); 


return f 
next: function() { 
return { 
value: o[ks[idxe]], 
done: (idx » ks.length) 
H 
} 
}; 
} 
FJ 


// 手动 遍历 myobject 

var it = myObject[Symbol.iterator](); 
it.next(); // { value:2, done:false ] 
it.next(); // { value:3, done:false ] 
it.next(); // { value:undefined, done:true } 





// 用 for..of 3i Jj myObject 
for (var v of myObject) { 
console.log( v ); 
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我 们 使 用 Object.defineProperty(..) 定义 了 我 们 自己 的 @@iterator (主要 是 
为 了 让 它 不 可 枚 举 )， 不 过 注意 ， 我 们 把 符号 当 作 可 计算 属性 名 (本 章 之 前 
有 介绍 )。 此 外 ， 也 可 以 直接 在 定义 对 象 时 进行 声明 ， 比 如 var myobject = ( 
a:2, b:3, [Symbol.iterator]: function() { /* .. */ ) }。 








for. GT DD ROIs hea Se net OUS 内 部 的 指针 都 会 向 前 移动 并 
返回 对 象 属 性 列表 的 下 一 个 值 (再 次 提醒 ， 需 要 注意 遍历 对 象 属性 / 值 时 的 顺序 ) 。 











代码 中 的 遍历 非常 简单 ， 只 是 传递 了 属性 本 身 的 值 。 不 过 只 要 你 愿意 ， 当 然 也 可 以 在 自 定 
义 的 数据 结构 上 实现 各 种 复杂 的 遍历 。 对 于 用 户 定义 的 对 象 来 说 ， 结 合 for. -of 循环 和 自 
定义 迭代 器 可 以 组 成 非常 强大 的 对 象 操作 工具 。 


比如 说 ， 一 个 Pixel 对 象 (有 x 和 y 坐标 值 ) 列表 可 以 按照 距离 原点 的 直线 距离 来 决定 遍 
历 顺序 ， 也 可 以 过 滤 掉 “ 太 远 ”的 点 ， 等 等 。 只 要 迭代 器 的 next() 调用 会 返回 { value: 
. 和 { done: true }, ES6 中 的 for. .of 就 可 以 遍历 它 。 











实际 上 ， 你 甚至 可 以 定义 一 个 “无 限 ” 和 迭代 右 ， 它 永远 不 会 “结束 ”并 且 总 会 返回 一 个 新 
值 〈 比 如 随机 数 、 递 增值 、 唯 一 标识 符 ， 等 等 )。 你 可 能 永远 不 会 在 for..of 循环 中 使 用 这 
样 的 迭代 器 ， 因 为 它 永 远 不 会 结束 ， 你 的 程序 会 被 挂 起 : 





























var randoms = { 
[Symbol.iterator]: function() f 
return { 
next: function() { 
return ( value: Math.random() }; 


Js 
} 
J; 


var randoms_pool = []; 
for (var n of randoms) { 
randoms pool.push( n ); 


// 防止 无 限 运 行 ! 
if (randoms pool.length --- 100) break; 
} 


这 个 友 代 器 会 生成 “无 限 个 ”随机 数 ， 因 此 我 们 添加 了 一 条 break 语句 ， 防 止 程序 被 挂 起 。 





3.5 小结 


JavaScript 中 的 对 象 有 字面 形式 (比如 var a = { .. }) 和 构造 形式 (比如 var a = new 
Array(..))。 字 面 形式 更 常用 ， 不 过 有 时 候 构 造形 式 可 以 提供 更 多 选项 。 

















许多 人 都 以 为 “JavaScript 中 万 物 都 是 对 象 "， 这 是 错误 的 。 对 象 是 6 个 〈 或 者 是 7 个 ， 取 
决 于 你 的 观点 ) 基础 类 型 之 一 。 对 象 有 包括 function 在 内 的 子 类 型 ， 不 同 子 类 型 具有 不 同 
的 行为 ， 比 如 内 部 标签 [object Array] 表示 这 是 对 象 的 子 类 型 数组 。 





对 象 就 是 键 / 值 对 的 集合 。 可 以 通过 .propName 或 者 ["propName"] 语法 来 获取 属性 值 。 访 
问 属性 时 ， 引 警 实际 上 会 调用 内 部 的 默认 [[Get]] 操作 (在 设置 属性 值 时 是 [[Put]])， 

[[Get]] 操作 会 检查 对 象 本 身 是 否 包 含 这 个 属性 ， 如 果 没 找到 的 话 还 会 查找 [[Prototype]] 
链 (参见 见 第 5 3), 





























属性 的 特性 可 以 通过 属性 描述 符 来 控制 ， 比 如 writable 和 configurable, Jh, WILLE FH 
Object.preventExtensions(..), Object.seal(..) 和 0bject.freeze(..) 来 设置 对 象 (及 其 
属性 ) 的 不 可 变性 级 别 。 


属性 不 一 定 包含 值 一 一 它们 可 能 是 具备 getter/setter 的 “访问 描述 符 ”"。 此 外 ， 属 性 可 以 是 
可 枚 举 或 者 不 可 枚 举 的 ， 这 决定 了 它们 是 否 会 出 现在 for..in 循环 中 。 


你 可 以 使 用 ES6 的 for..of 语法 来 遍历 数据 结构 (数组 、 对 象 ， 等 等 ) 中 的 值 ，for. .of 
会 寻找 内 置 或 者 自 定义 的 iterator 对 象 并 调用 它 的 next() 方法 来 遍历 数据 值 。 


























第 4 章 
混合 对 象 AX 





上 一 章 介 绍 了 对 象 ， 这 章 自然 要 介绍 和 类 相关 的 面向 对 象 编程 。 在 研究 类 的 具体 机 制 之 
前 ， 我 们 首先 会 介绍 面向 类 的 设计 模式 : 实例 化 (instantiation)、 继 承 (inheritance) 和 
(相对 ) 多 态 (polymorphism), 














我 们 将 会 看 到 ， 这 些 概 念 实际 上 无 法 直接 对 应 到 JavaScript 的 对 象 机 制 ， 因 此 我 们 会 介绍 
许多 JavaScript 开发 者 所 使 用 的 解决 方法 (比如 混入，mixin)。 























本 章 用 很 大 的 篇 幅 ( 整 整 半 章 ) 介绍 面向 对 象 编程 理论 。 在 后 半 章 介绍 混入 
时 会 把 这 些 概念 落实 到 JavaScript 代码 上 。 但 是 首先 我 们 会 看 到 许多 概念 和 
伪 代 码 ， 因 此 干 万 不 要 迷路 IRAJ! 













































































4.1 类 理论 
类 /继承 描述 了 一 种 代码 的 组 织 结构 形式 
Hi. 


面向 对 象 编程 强调 的 是 数据 和 操作 数据 的 行为 本 质 上 是 互相 关联 的 (当然 ,不同 的 数据 有 
不 同 的 行为 )， 因 此 好 的 设计 就 是 把 数据 以 及 和 它 相 关 的 行为 打包 (或 者 说 封装 ) 起 来 。 
这 在 正式 的 计算 机 科学 中 有 时 被 称 为 数据 结构 。 

举例 来 说 ， 用 来 表示 一 个 单词 或 者 短语 的 一 串 字 符 通 常 被 称 为 字符 串 。 字 符 就 是 数据 。 但 
是 你 关心 的 往往 不 是 数据 是 什么 ， 而 是 可 以 对 数据 做 什么 ， 所 以 可 以 应 用 在 这 种 数据 上 的 
行为 计算 长 度 、 添 加 数据 、 搜 索 ， 等 等 ) 都 被 设计 成 String 类 的 方法 。 





一 种 在 软件 中 对 真实 世界 中 问题 领域 的 建 模 
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所 有 字符 串 都 是 String 类 的 一 个 实例 ， 也 就 是 说 它 是 一 个 包 庄 ， 包 含 字符 数据 和 我 们 可 以 
应 用 在 数据 上 的 函数 。 








我 们 还 可 以 使 用 类 对 数据 结构 进行 分 类 ， 可 以 把 任意 数据 结构 看 作 范 围 更 广 的 定义 的 一 种 
特例 。 


我 们 来 看 一 个 常见 的 例子 ,，“ 汽 车 ”可 以 被 看 作 “ 交 通 工 具 ” 的 一 种 特例 ， 后 者 是 更 广泛 
的 类 。 











我 们 可 以 在 软件 中 定义 一 个 Vehicle 类 和 一 个 Car 类 来 对 这 种 关系 进行 建 模 。 


Vehicle 的 定义 可 能 包含 推进 器 〈 比 如 引擎)、 载 人 能 力 等 等 ， 这 些 都 是 Vehicle 的 行为 。 我 
们 在 Vehicle 中 定义 的 是 (几乎 ) 所 有 类 型 的 交通 工具 (飞机 、 火 车 和 汽车 ) 都 包含 的 东西 。 
在 我 们 的 软件 中 ， 对 不 同 的 交通 工具 重复 定义 “ 载 人 能 力 ” 是 没有 意义 的 。 相 反 ， 我 们 只 
在 Vehicle 中 定义 一 次 ， 定 义 Car 时 ， 只 要 声明 它 继承 (或 者 扩展 ) 了 Vehicle 的 这 个 基 
础 定义 就 行 。Car 的 定义 就 是 对 通用 Vehicle 定义 的 特殊 化 。 


虽然 Vehicle 和 Car 会 定义 相同 的 方法 ， 但 是 实例 中 的 数据 可 能 是 不 同 的 ， 比 如 每 辆 车 独 
一 无 二 的 VIN (Vehicle Identification Number， 车 辆 识别 号 码 ) ， 等 等 。 








这 就 是 类 、 继 承 和 实例 化 。 


类 的 另 一 个 核心 概念 是 多 态 ， 这 个 概念 是 说 父 类 的 通用 行为 可 以 被 子 类 用 更 特殊 的 行为 重 
写 。 实 际 上 ， 相 对 多 态 性 允许 我 们 从 重 写 行为 中 引用 基础 行为 。 

















类 理论 强烈 建议 父 类 和 子 类 使 用 相同 的 方法 名 来 表示 特定 的 行为 ， 从 而 让 子 类 重 写 父 类 。 
我 们 之 后 会 看 到 ， 在 JavaScript 代码 中 这 样 做 会 降低 代码 的 可 读 性 和 健壮 性 。 


4.1.1 “类 ”设计 模式 

你 可 能 从 来 没 把 类 作为 设计 模式 来 看 待 ， 讨 论 得 最 多 的 是 面向 对 象 设计 模式 ， 比 如 选 代 器 
模式 、 观 察 者 模式 、 工 厂 模式 、 单 例 模 式 ， 等 等 。 从 这 个 角度 来 说 ， 我 们 似乎 是 在 (低级 ) 
面向 对 象 类 的 基础 上 实现 了 所 有 (高 级 ) 设计 模式 ， 似 乎 面向 对 象 是 优秀 代码 的 基础 。 











=> 














如 果 你 之 前 接受 过 正规 的 编程 教育 的 话 ， 可 能 听 说 过 过 程 化 编程 ， 这 种 代码 只 包含 过 程 
(函数 ) 调用 ， 没 有 高 层 的 抽象 。 或 许 老 师 还 教 过 你 最 好 使 用 类 把 过 程 化 风格 的 “意大利 
面 代码 ”转换 成 结构 清晰 、 组 织 良 好 的 代码 。 


当然 ， 如 果 你 有 函数 式 编程 《比如 Monad) 的 经 验 就 会 知道 类 也 是 非常 常用 的 一 种 设计 模 
式 。 但 是 对 于 其 他 人 来 说 ， 这 可 能 是 第 一 次 知道 类 并 不 是 必须 的 编程 基础 ， 而 是 一 种 可 选 
的 代码 抽象 。 
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有 些 语 言 〈 比 如 Java) 并 不 会 给 你 选择 的 机 会 ， 类 并 不 是 可 选 的 一 一 万 物 皆 是 类 。 其 他 语 
言 (比如 C/C++ 或 者 PHP) 会 提供 过 程 化 和 面向 类 这 两 种 语法 ， 开 发 者 可 以 选择 其 中 一 种 
风格 或 者 混用 两 种 风格 。 














4.1.2 JavaScript 中 的 “类 ” 

JavaScript 属于 哪 一 类 呢 ? 在 相当 长 的 一 段 时 间 里 ，JavaScript 只 有 一 些 近 似 类 的 语法 元 素 
(比如 new 和 instanceof)， 不 过 在 后 来 的 ES6 中 新 增 了 一 些 元 素 ， 比 如 class 关键 字 (参见 
附录 A)。 











这 是 不 是 意味 着 JavaScript 中 实际 上 有 类 呢 ? 简单 来 说 : 不 是 。 


由 于 类 是 一 种 设计 模式 ， 所 以 你 可 以 用 一 些 方法 (本章 之 后 会 介绍 ) 近似 实现 类 的 功能 。 
为 了 满足 对 于 类 设计 模式 的 最 普遍 需求 ，JavaScript 提供 了 一 些 近似 类 的 语法 。 


虽然 有 近似 类 的 语法 ， 但 是 JavaScript 的 机 制 似乎 一 直 在 阻止 你 使 用 类 设计 模式 。 在 
近似 类 的 表象 之 下 ，JavaScript 的 机 制 其 实 和 类 完全 不 同 。 语 法 糖 和 (广泛 使 用 的 ) 
JavaScript“ 类 ” 库 试 图 掩盖 这 个 现实 ， 但 是 你 迟早 会 面 对 它 : 其 他 语言 中 的 类 和 JavaScript 
中 的 “类 ”并 不 一 样 。 


总 结 一 下 ， 在 软件 设计 中 类 是 一 种 可 选 的 模式 ， 你 需要 自己 决定 是 否 在 JavaScript 中 使 用 
它 。 由 于 许多 开发 者 都 非常 喜欢 面向 类 的 软件 设计 ， 我 们 会 在 本 章 的 剩余 部 分 中 介绍 如 何 
在 JavaScript 中 实现 类 以 及 存在 的 一 些 问题 。 


4.2. 类 的 机 制 


在 许多 面向 类 的 语言 中 ,“ 标 准 库 ” 会 提供 Stack 类 ， 它 是 一 种 “ 栈 ” 数 据 结构 (支持 压 
入 、 弹 出 ， 等 等 )。Stack 类 内 部 会 有 一 些 变量 来 存储 数据 ， 同 时 会 提供 一 些 公有 的 可 访问 
行为 〈 方法 ")， 从 而 让 你 的 代码 可 以 和 (隐藏 的 ) 数据 进行 交互 〈 比 如 添加 、 删 除数 据 )。 
但 是 在 这 些 语 言 中 ， 你 实际 上 并 不 是 直接 操作 Stack. (除非 创建 一 个 静态 类 成 员 引 用 ， 这 


超出 了 我 们 的 讨论 范围 )。Stack 类 仅仅 是 一 个 抽象 的 表示 ， 它 描述 了 所 有 “ 栈 ” 需 要 做 的 
事 ， 但 是 它 本 身 并 不 是 一 个 “ 栈 ”。 你 必须 先 实例 化 Stack 类 然后 才能 对 它 进行 操作 。 
































4.2.1 建造 

“类 ”和 “实例 ”的 概念 来 源 于 房屋 建造 。 

建筑 师 会 规划 出 一 个 建筑 的 所 有 特性 : 多 宽 、 多 高 、 多 少 个 窗户 以 及 窗户 的 位 置 ， 甚 至 连 
建造 墙 和 房 顶 需 要 的 材料 都 要 计划 好 。 在 这 个 阶段 他 并 不 需要 关心 建筑 会 被 建 在 哪 ， 也 不 


需要 关心 会 建造 多 少 个 这 样 的 建筑 。 
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建筑 师 也 不 太 关 心 具 、 壁 纸 、 吊 局 等 一 他 只 关心 需要 用 什么 结构 来 


容纳 它们 。 














建筑 蓝图 只 是 建筑 计划 ， 它 们 并 不 是 真正 的 建筑 ， 我 们 还 需要 一 个 建筑 工人 来 建造 建筑 。 
筑 工 人 会 按照 蓝图 建造 建筑 。 实 际 上 ， 他 会 把 规划 好 的 特性 从 蓝图 中 复制 到 现实 世界 的 
建筑 中 。 


完成 后 ， odii id. 本 质 上 就 是 对 蓝图 的 复制 。 之 后 建筑 工人 就 可 以 
到 下 一 个 地 方 ， 把 所 有 工作 都 重复 一 各， 再 创建 一 份 副本 。 
建筑 和 蓝图 之 间 的 关系 是 间接 的 。 你 可 以 通过 蓝图 了 解 建筑 的 结构 ， 只 观察 建筑 本 身 是 无 


法 获得 这 些 信息 的 。 但 是 如 有 果 你 想 打 开 一 局 门 ， 那 就 必须 接触 真实 的 建筑 才 行 一 监 图 只 
能 表示 门 应 该 在 哪 ， 但 并 不 是 真正 的 门 。 


















































一 个 类 就 是 一 张 蓝 图 。 导 真 正 可 以 交互 的 对 象 ， 我 们 必须 按照 类 来 建造 (也 可 以 说 
实例 化 ) 一 个 东西 ， 这 个 东西 通常 被 称 为 实例 ， 有 需要 的 话 ， 我 们 可 以 直接 在 实例 上 调用 
方法 并 访问 其 所 有 2 数据 属性 。 


这 个 对 象 就 是 类 中 描述 的 所 有 特性 的 一 份 副本 。 


你 走 进 一 栋 建筑 时 ， 它 的 蓝图 不 太 可 能 挂 在 墙 上 〈 尽 管 这 个 蓝图 可 能 会 保存 在 公共 档案 馆 
中 )。 类 似 地 ， 你 通常 也 不 会 使 用 一 个 实例 对 象 来 直接 访问 并 操作 它 的 类 ， 不 过 至 少 可 以 
判断 出 这 个 实例 对 象 来 自 哪个 类 。 


把 类 和 实例 对 象 之 间 的 关系 看 作 是 直接 关系 而 不 是 间接 关系 通常 更 有 助 于 理解 。 类 通过 复 
制 操作 被 实例 化 为 对 象形 式 : 















































如 你 所 见 ， 箭 头 的 方向 是 从 左 向 右 、 从 上 向 下 ， 它 表示 概念 和 物理 意义 上 发 生 的 复制 操作 。 





4.2.2. ”构造 函数 
类 实例 是 由 一 个 特殊 的 类 方法 构造 的 ， 这 个 方法 名 通常 和 类 名 相同 ， 被 称 为 构造 图 数 。 这 
个 方法 的 任务 就 是 初始 化 实例 需要 的 所 有 信息 (状态 ) 。 


举例 来 说 ， 思 考 下 面 这 个 关于 类 的 伪 代 码 (编造 出 来 的 语法 ) : 

















class CoolGuy { 
specialTrick = nothing 


CoolGuy( trick ) { 
specialTrick = trick 


} 


showOff() { 
output( "Here's my trick: ", specialTrick ) 
} 
} 


我 们 可 以 调用 类 构造 函数 来 生成 一 个 CoolGuy 实例 : 


Joe = new CoolGuy( "jumping rope" ) 


Joe.showOff() // 这 是 我 的 绝技 : 跳绳 


注意 ，CoolGuy 类 有 一 个 CoolGuy() 构造 函数 ， 执 行 new CoolGuy O 时 实际 上 调用 的 就 是 


nz 
Es 


构造 函数 会 返回 一 个 对 象 ( 也 就 是 类 的 一 个 实例 )， 之 后 我 们 可 以 在 这 个 对 象 上 调用 





showOff() 方法 ， 来 输出 指定 CoolGuy 的 特长 。 


显然 ， 跳 强 让 乔 成 为 了 一 个 非常 酷 的 家 伙 。 


类 构造 函数 属于 类 ， 而 且 通 常 和 类 同名 。 此 外 ， 构 造 函 数 大 多 需要 用 new 来 调 ， 这 样 语言 
引擎 才 知 道 你 想 要 构造 一 个 新 的 类 实例 。 


4.3 类 的 继承 





在 








面向 类 的 语言 中 ， 你 可 以 先 定义 一 个 类 ， 然 后 定义 一 个 继承 前 者 的 类 。 





后 者 通常 被 称 为 “ 子 类 ” ， 前 者 通常 被 称 为 “ 父 类 ”。 这 些 术 语 显 然 是 类 比 父母 和 孩子 ， 不 
过 在 意思 上 稍 有 扩展 ， 你 很 快 就 会 看 到 。 


对 于 父母 的 亲生 孩子 来 说 ， 父 母 的 基因 特性 会 被 复制 给 孩子 。 显 然 ， 在 大 多 数 生物 的 繁殖 
系统 中 ， 双 末 都 会 贡献 等 量 的 基因 给 孩子 。 但 是 在 编程 语言 中 ， 我 们 假设 只 有 一 个 父 类 。 


一 旦 孩子 出 生 ， 他 们 就 变 成 了 单独 的 个 体 。 虽 然 孩 子 会 从 父母 继承 许多 特性 ， 但 是 他 是 一 
个 独一无二 的 存在 。 如 果 孩 子 的 头发 是 红色 ， 父 母 的 头发 未 必 是 红 的 ， 也 不 会 随 之 变 红 ， 

















二 者 之 间 没 有 直接 的 联系 。 





同 理 ， 定 义 好 一 个 子 类 之 后 ， 相 对 于 父 类 来 说 它 就 是 一 个 独立 并 且 完 全 不 同 的 类 。 子 类 会 
包含 父 类 行为 的 原始 副本 ， 但 是 也 可 以 重 写 所 有 继承 的 行为 甚至 定义 新 行为 。 

非常 重要 的 一 点 是 ， 我 们 讨论 的 父 类 和 子 类 并 不 是 实例 。 父 类 和 子 类 的 比喻 容易 造成 一 
些 误解 ， 实 际 上 我 们 应 当 把 父 类 和 子 类 称 为 父 类 DNA 和 子 类 DNA。 我 们 需要 根据 这 些 


DNA 来 创建 (或 者 说 实例 化 ) 一 个 人 ， 然 后 才能 和 他 进行 沟通 





o 














好 了 ， 我 们 先 抛 开 现 实 中 的 父母 和 和 孩子， 来 看 一 个 稍 有 不 同 的 例子 : 不 同类 型 的 交通 工 





具 。 这 是 一 个 非常 典型 (并且 经 常 被 抱怨 ) 的 讲解 继承 的 例子 。 








首先 回顾 一 下 本 章 前 面部 分 提出 的 Vehicle 和 Car 类 。 思 考 下 再 








class Vehicle { 
engines - 1 


ignition() { 
output( "Turning on my engine." ); 


drive() { 
ignition(); 
output( "Steering and moving forward!" ) 


} 

class Car inherits Vehicle { 
wheels = 4 
drive() { 


inherited:drive() 
output( "Rolling on all ", wheels, " wheels!" ) 


} 


class SpeedBoat inherits Vehicle { 
engines = 2 


ignition() { 


output( "Turning on my ", engines, " engines." ) 


pilotO { 
inherited:drive() 


i 关于 类 继承 的 伪 代 码 : 


output( "Speeding through the water with ease!" ) 








为 了 方便 理解 并 缩短 代码 ， 我 们 省 略 了 这 些 类 的 构造 函数 。 





我 们 通过 定义 Vehicle 类 来 假设 一 种 发 动机 ， 一 种 点 火 方式 ， 一 种 驾驶 方法 。 但 是 你 不 可 
能 制造 一 个 通用 的 “交通 工具 ”， 因 为 这 个 类 只 是 一 个 抽象 的 概念 。 
接 下 来 我 们 定义 了 两 类 具体 的 交通 工具 : Car 和 SpeedBoat。 它 们 都 从 Vehicle 继承 了 通用 


的 特性 并 根据 自身 类 别 修改 了 某 些 特 性 。 汽 车 需要 四 个 轮子 ， 快 艇 需要 两 个 发 动机 ， 因 此 
它 必 须 启 动 两 个 发 动机 的 点 火 装置 。 





4.3.1 多 态 

Car 重 写 了 继承 自 父 类 的 drive() 方法 ， 但 是 之 后 Car 调用 了 inherited:drive() 方法 ， 
这 表明 Car 可 以 引用 继承 来 的 原始 drive() 方法 。 快 艇 的 pilotO 方法 同样 引用 了 原始 
drive() 方法 。 

这 个 技术 被 称 为 多 态 或 者 虚拟 多 态 。 在 本 例 中 ， 更 恰当 的 说 法 是 相对 多 态 。 

多 态 是 一 个 非常 广泛 的 话题 ， 我 们 现在 所 说 的 “相对 ”只 是 多 态 的 一 个 方面 : 任何 方法 都 
可 以 引用 继承 层次 中 高 层 的 方法 (无论 高 层 的 方法 名 和 当前 方法 名 是 否 相 同 )。 之 所 以 说 
“相对 ”是 因为 我 们 并 不 会 定义 想 要 访问 的 绝对 继承 层次 (或 者 说 类 ) ， 而 是 使 用 相对 引用 
“查找 上 一 层 ”。 




















在 许多 语言 中 可 以 使 用 super 来 代替 本 例 中 的 inherited:， 它 的 含义 是 “ 超 类 ” 
(superclass)， 表 示 当 前 类 的 父 类 /祖先 类 。 

多 态 的 另 一 个 方面 是 ， 在 继承 链 的 不 同 层次 中 一 个 方法 名 可 以 被 多 次 定义 ， 当 调用 方法 时 
会 自动 选择 合适 的 定义 。 





在 之 前 的 代码 中 就 有 两 个 这 样 的 例子 : drive() 被 定义 在 Vehicle 和 Car 中 ，ignition() 被 
定义 在 Vehicle 和 SpeedBoat 中 。 

















在 传统 的 面向 类 的 语言 中 super 还 有 一 个 功能 ， 就 是 从 子 类 的 构造 函数 中 通过 
super 可 以 直接 调用 父 类 的 构造 函数 。 通 常 来 说 这 没什么 问题 ， 因 为 对 于 真正 
的 类 来 说 ， 构 造 函 数 是 属于 类 的 。 然 而 ， 在 JavaScript 中 恰好 相反 一 一 实际 
上 “类 ”是 属于 构造 函数 的 〈 类 似 Foo.prototype... 这 样 的 类 型 引用 )。 由 于 
JavaScript 中 父 类 和 子 类 的 关系 只 存在 于 两 者 构造 函数 对 应 的 .prototype 对 象 
中 ， 因 此 它们 的 构造 函数 之 间 并 不 存在 直接 联系 ， 从 而 无 法 简单 地 实现 两 者 的 
相对 引用 在 ES6 的 类 中 可 以 通过 super 来 “解决 ”这 个 问题 ， 参 见 附录 A)。 










































































































































































我 们 可 以 在 ignitionO 中 看 到 多 态 非常 有 趣 的 一 点 。 在 pilot(O) 中 通过 相对 多 态 引 用 了 
(继承 来 的 ) Vehicle 中 的 drive()。 但 是 那个 driveO 方法 直接 通过 名 字 (而 不 是 相对 引 
H) 引用 了 ignotion() 方法 。 


那么 语言 引擎 会 使 用 哪个 ignition() WE, Vehicle 的 还 是 SpeedBoat 的 ?实际 上 它 会 使 用 
SpeedBoat 的 ignition()。 如 果 你 直接 实例 化 了 Vehicle 类 然后 调用 它 的 drive()， 那 语言 
引擎 就 会 使 用 Vehicle 中 的 ignition() 方法 。 

换言之 ，ignition() 方法 定义 的 多 态 性 取决 于 你 是 在 哪个 类 的 实例 中 引用 它 。 


这 似乎 是 一 个 过 于 深入 的 学 术 细 节 ， 但 是 只 有 理解 了 这 个 细节 才能 理解 JavaScript 中 类 似 
(但 是 并 不 相同 ) 的 [[Prototype]] 机 制 。 











ETX (而 不 是 它们 创建 的 实例 对 象 ! ) 中 也 可 以 相对 引用 它 继 承 的 父 类 ， 这 种 相对 引用 
通常 被 称 为 super, 


还 记得 之 前 的 那 张 图 吗 ? 

















注意 这 些 实例 (al、a2、bl 和 b2) 和 继承 (Bar), ， 箭 头 表 示 复 制 操作 。 


从 概念 上 来 说 ， 子 类 Bar 应 当 可 以 通过 相对 多 态 引 用 (或 者 说 super) 来 访问 父 类 Foo 中 
的 行为 。 需 要 注意 ， 子 类 得 到 的 仅仅 是 继承 自 父 类 行为 的 一 份 副本 。 子 类 对 继承 到 的 一 个 
方法 进行 “ 重 写 ”， 不 会 影响 父 类 中 的 方法 ， 这 两 个 方法 互 不 影响 ， 因 此 才能 使 用 相对 多 
态 引 用 访问 父 类 中 的 方法 (如果 重 写 会 影响 父 类 的 方法 ， 那 重 写 之 后 父 类 中 的 原始 方法 就 
不 存在 了 ， 自 然 也 无 法 引用 )。 

















多 态 并 不 表示 子 类 和 父 类 有 关联 ， 子 类 得 到 的 只 是 父 类 的 一 份 副 本 。 类 的 继承 其 实 就 是 
复制 。 











4.9.2 ”多重 继承 

还 记得 我 们 之 前 关于 父 类 、 子 类 和 DNA 的 讨论 吗 ?当时 我 们 说 这 个 比喻 不 太 恰 当 ， 因 为 
在 现实 中 绝 大 多 数 后 代 是 由 双亲 产生 的 。 如 果 类 可 以 继承 两 个 类 ， 那 看 起 来 就 更 符合 现实 
的 比喻 了 。 








有 些 面向 类 的 语言 允许 你 继承 多 个 “ 父 类 "。 多 重 继承 意味 着 所 有 父 类 的 定义 都 会 被 复制 
到 子 类 中 。 


从 表面 上 来 ， 对 于 类 来 说 这 似乎 是 一 个 非常 有 用 的 功能 ， 可 以 把 许多 功能 组 合 在 一 起 。 然 
而 ， 这 个 机 制 同 时 也 会 带 来 很 多 复杂 的 问题 。 如 有 果 两 个 父 类 中 都 定义 了 driveO 方法 的 话 ， 
子 类 引用 的 是 哪个 呢 ? 难道 每 次 都 需要 手动 指定 具体 父 类 的 drive) 方法 吗 ? 这 样 多 态 继 
承 的 很 多 优点 就 存在 了 。 


除 此 之 外 ， 还 有 一 种 被 称 为 钻石 问题 的 变种 。 在 钻石 问题 中 ， 子 类 D 继承 自 两 个 父 类 (B 
和 5C)， 这 两 个 父 类 都 继承 自 A。 如 果 A 中 有 drive() 方法 并 且 B 和 (5 都 重 写 了 这 个 方法 
(多 态 ) ， 那 当 D 引用 drive() 时 应 当选 择 哪 个 版 本 呢 (B:drive() 还 是 C:drive()) ? 























这 些 问 题 远 比 看 上 去 要 复杂 得 多 。 之 所 以 要 介绍 这 些 问题 ， 主 要 是 为 了 和 JavaScript 的 机 
制 进行 对 比 。 

相 比 之 下 ，JavaScript 要 简单 得 多 : 它 本 身 并 不 提供 “多 重 继 承 ” 功 能 。 许 多 人 认为 这 是 
件 好 事 ， 因 为 使 用 多 重 继承 的 代价 太 高 。 然 而 这 无 法 阻挡 开发 者 们 的 热情 ， 他 们 会 尝试 各 
种 各 样 的 办 法 来 实现 多 重 继承 ， 我 们 马上 就 会 看 到 。 














4.4 混 


在 继承 或 者 实例 化 时 ，JavaScript 的 对 象 机 制 并 不 会 自动 执行 复制 行为 。 简 单 来 说 ， 
JavaScript 中 只 有 对 象 ， 并 不 存在 可 以 被 实例 化 的 “类 ”。 一 个 对 象 并 不 会 被 复制 到 其 他 对 
象 ， 它 们 会 被 关联 起 来 (参见 第 5 章 )。 


























由 于 在 其 他 语言 中 类 表现 出 来 的 都 是 复制 行为 ， 因 此 JavaScript 开发 者 也 想 出 了 一 个 方法 来 
模拟 类 的 复制 行为 ， 这 个 方法 就 是 混入 。 接 下 来 我 们 会 看 到 两 种 类 型 的 混入 : SAGE A 


4.4.1 


显 式 混入 





首先 我 们 来 回顾 一 下 之 前 提 到 的 Vehicle 和 Car。 由 于 JavaScript 不 会 自动 实现 Vehicle 
到 car 的 复制 行为 ， 所 以 我 们 需要 手动 实现 复制 功能 。 这 个 功能 在 许多 库 和 框架 中 被 称 为 


extend(. 














.)， 但 是 为 了 方便 理解 我 们 称 之 为 mixin(..)。 





// 非常 简单 的 mixin(..) 例子 : 


function mixin( sourceObj, targetObj ) { 


5 


5 





for (var key in sourceObj) { 
// 只 会 在 不 存在 的 情况 下 复制 
if (!(key in targetObj)) ( 
targetObj[key] = sourceObj[key]; 





} 
} 


return targetObj; 


Vehicle = ( 
engines: 1, 


ignition: function() { 
console.log( "Turning on my engine." ); 


Js 


drive: function() { 
this.ignition(); 
console.log( "Steering and moving forward!" ); 


Car = mixin( Vehicle, { 
wheels: 4, 


drive: function() { 
Vehicle.drive.call( this ); 
console. log( 
"Rolling on all " + this.wheels + 


); 


wheels!" 








点 需要 注意 ， 我 们 处 理 的 已 经 不 再 是 类 了 ， 因 为 在 JavaScript 中 不 存在 
K, Vehicle 和 Car 都 是 对 象 ， 供 我 们 分 别 进 行 复制 和 粘贴 。 






































现在 Car 中 就 有 了 一 份 Vehicle 属性 和 国 数 的 副本 了 。 从 技术 角度 来 说 ， 国 数 实 际 上 没有 
被 复制 ， 复 制 的 是 函数 引用 。 所 以 ，Car 中 的 属性 ignition HAE Vehicle 中 复制 过 来 的 
对 于 ignition() 函数 的 引用 。 相 反 ， 属 性 engines 就 是 直接 从 Vehicle 中 复制 了 值 1。 





Car 已 经 有 了 drive 属性 (函数 )， 所 以 这 个 属性 引用 并 没有 被 mixin 重 写 ， 从 而 保留 了 
car 中 定义 的 同名 属性 ， 实 现 了 “ 子 类 ”对 “ 父 类 ”属性 的 重 写 (参见 mixin(..) 例子 中 
的 if 语句 )。 


1. 再 说 多 态 
我 们 来 分 析 一 下 这 条 语句 ，Vehicle.drive.call( this )。 这 就 是 我 所 说 的 显 式 多 态 。 还 记 
得 吗 ， 在 之 前 的 伪 代 码 中 对 应 的 语句 是 inherited:drive()， 我 们 称 之 为 相对 多 态 。 








JavaScript (在 ES6 之 前 ;参见 附录 A) 并 没有 相对 多 态 的 机 制 。 所 以 ， 由 于 Car 和 
Vehicle 中 都 有 drive() 函数 ， 为 了 指明 调用 对 象 ， 我 们 必须 使 用 绝对 (而 不 是 相对 ) 引 
用 。 我 们 通过 名 称 显 式 指定 Vehicle 对 象 并 调用 它 的 drive) 函数 。 


但 是 如 果 直接 执行 vehicte.drive()， 国 数 调用 中 的 this 会 被 绑 定 到 Vehicle 对 象 而 不 是 
Car 对 象 (参见 第 2 章 )， 这 并 不 是 我 们 想 要 的 。 因 此 ， 我 们 会 使 用 .call(this) (参见 第 2 
章 ) 来 确保 drive) 在 Car 对 象 的 上 下 文中 执行 。 


如 果 函 数 Car.drive() 的 名 称 标识 符 并 没有 和 Vehicle.drive() 重合 (或 
者 说 “屏蔽 ”; 参见 第 5 章 ) 的 话 ， 我 们 就 不 需要 实现 方法 多 态 ， 因 为 调用 
mixin(..) 时 会 把 函数 Vehicle.drive() 的 引用 复制 到 Car 中 ， 因 此 我 们 可 
以 直接 访问 this.drive()。 正 是 由 于 存在 标识 符 重 骆 ， 所 以 必须 使 用 更 加 复 
杂 的 显 式 伪 多 态 方法 。 
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在 支持 相对 多 态 的 面向 类 的 语言 中 ，Car 和 Vehicle 之 间 的 联系 只 在 类 定义 的 开头 被 创建 ， 
从 而 只 需要 在 这 一 个 地 方 维护 两 个 类 的 联系 。 





但 是 在 JavaScript 中 〈 由 于 屏蔽 ) 使 用 显 式 伪 多 态 会 在 所 有 需要 使 用 ( 伪 ) 多 态 引用 的 地 
方 创建 一 个 函数 关联 ， 这 会 极 大 地 增加 维护 成 本 。 此 外 ， 由 于 显 式 伪 多 态 可 以 模拟 多 重 继 
承 ， 所 以 它 会 进一步 增加 代码 的 复杂 度 和 维护 难度 。 

















使 用 伪 多 态 通常 会 导致 代码 变 得 更 加 复杂 、 难 以 阅读 并 且 难 以 维护 ， 因 此 应 当 尽量 避免 使 
用 显 式 伪 多 态 ， 因 为 这 样 做 往往 得 不 偿 失 。 

2. 混合 复制 

回顾 一 下 之 前 提 到 的 mxin(..) 函数 : 





// 非常 简单 的 mixin(..) 例子 : 


function mixin( sourceObj, targetObj ) { 








for (var key in sourceObj) { 
// 只 会 在 不 存在 的 情况 下 复制 
if (!(key in targetObj)) { 
targetObj[key] = sourceObj[key]; 
} 
} 


return target0bj; 


} 
现在 我 们 来 分 析 一 下 mixin(..) 的 工作 原理 。 它 会 遍历 source0bj 〈 本 例 中 是 Vehicle) 的 


属性 ， 如 果 在 targetobj (本 例 中 是 Car) 没有 这 个 属性 就 会 进行 复制 。 由 于 我 们 是 在 目标 
对 象 初始 化 之 后 才 进 行 复制 ， 因 此 一 定 要 小 心 不 要 覆盖 目标 对 象 的 原 有 属性 。 






































如 果 我 们 是 先进 行 复制 然后 对 Car 进行 特殊 化 的 话 ， 就 可 以 跳 过 存在 性 检查 。 不 过 这 种 方 
法 并 不 好 用 并 且 效 率 更 低 ， 所 以 不 如 第 一 种 方法 常用 : 





// 另 一 种 混和 人 国 数 ， 可 能 有 重 写 风险 
function mixin( sourceObj, targetObj ) ( 
for (var key in sourceObj) ( 
targetObj[key] = sourceObj[key]; 





j 


return targetO0bj; 


var Vehicle = ( 
H ris 
E 


// 首先 创建 一 个 空 对 象 并 把 Vehicle 的 内 容 复 制 进去 


var Car = mixin( Vehicle, ( ) ); 


// 然后 把 新 内 容 复制 到 Car 中 
mixin( { 
wheels: 4, 








drive: function() ( 
. T 
), Car ); 
3X D 175 23 8B T LACUS REI LEA. Vehicle 中 显 性 复制 到 Car 中 。 “混入 ”这 个 名 字 来 源 
于 这 个 过 程 的 另 一 种 解释 : Car 中 混合 了 Vehicle 的 内 容 ， 就 像 你 把 巧克力 片 混 合 到 你 最 
喜欢 的 饼干 面团 中 一 样 。 





复制 操作 完成 后 ，Car 就 和 Vehicle 分 离 了 ， 向 Car 中 添加 属性 不 会 影响 Vehicle， 反 之 
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这 里 跳 过 了 一 些小 细节 ， 实 际 上 ， 在 复制 完成 之 后 两 者 之 间 仍 然 有 一 些 巧 妙 
的 方法 可 以 “影响 ”到 对 方 ， 例 如 引用 同一 个 对 象 〈 比 如 一 个 数组 )。 












































由 于 两 个 对 象 引 用 的 是 同一 个 函数 ， 因 此 这 种 复制 (或 者 说 混入 ) 实际 上 并 不 能 完全 模拟 
面向 类 的 语言 中 的 复制 。 





JavaScript 中 的 函数 无 法 (用 标准 、 可 靠 的 方法 ) 真正 地 复制 ， 所 以 你 只 能 复制 对 共享 
函数 对 象 的 引用 (函数 就 是 对 象 ， 参 见 第 3 章 )。 如 果 你 修改 了 共享 的 函数 对 象 ( 
ignition())， 比 如 添加 了 一 个 属性 ， 那 Vehicle 和 Car 都 会 受到 影响 。 





显 式 混入 是 JavaScript 中 一 个 很 棒 的 机 制 ， 不 过 它 的 功能 也 没有 看 起 来 那么 强大 。 虽 然 它 
可 以 把 一 个 对 象 的 属性 复制 到 另 一 个 对 象 中 ， 但 是 这 其 实 并 不 能 带 来 太 多 的 好 处 ， 无 非 就 
是 少 几 条 定义 语句 ， 而 且 还 会 带 来 我 们 刚才 提 到 的 函数 对 象 引 用 问题 。 

如 果 你 向 目标 对 象 中 显 式 混和 超过 一 个 对 象 ， 就 可 以 部 分 模仿 多 重 继承 行为 ， 但 是 仍 没 有 
直接 的 方式 来 处 理 函 数 和 属性 的 同名 问题 。 有 些 开发 者 / 库 提 出 了 “ 晚 绑 定 ”技术 和 其 他 的 
一 些 解 决 方法 ,但 是 从 根本 上 来 说 ， 使 用 这 些 “ 诡 计 ” 通 常会 (降低 性 能 并 且 ) 得 不 偿 失 。 


一 定 要 注意 ， 只 在 能 够 提高 代码 可 读 性 的 前 提 下 使 用 显 式 混入 ， 避 免 使 用 增加 代码 理解 难 
度 或 者 让 对 象 关系 更 加 复杂 的 模式 .。 





























如 果 使 用 混入 时 感觉 越 来 越 困难 ， 那 或 许 你 应 该 停止 使 用 它 了 。 实 际 上 ， 如 果 你 必须 使 用 
一 个 复杂 的 库 或 者 函数 来 实现 这 些 细 市 ， 那 就 标志 着 你 的 方法 是 有 问题 的 或 者 是 不 必要 
的 。 第 6 章 会 试 着 提出 一 种 更 简单 的 方法 ， 它 能 满足 这 些 需 求 并 且 可 以 避免 所 有 的 问题 。 


3. 寄生 继承 
显 式 混入 模式 的 一 种 变 体 被 称 为 “寄生 继承 ”， 它 既是 显 式 的 又 是 隐 式 的 ， 主 要 推广 者 是 


Douglas Crockford, 





下 面 是 它 的 工作 原理 ， 














//“ 传 统 的 JavaScript 类 ”Vehicle 
function Vehicle() { 
this.engines = 1; 


Vehicle.prototype.ignition = function() { 
console.log( "Turning on my engine." ); 
5 
Vehicle.prototype.drive = function() { 
this.ignition(); 
console.log( "Steering and moving forward!" ); 





|] "SHE" Car 

function Car() { 
// 首先 ，car 是 一 个 Vehicle 
var car = new Vehicle(); 

















// 接着 我 们 对 car 进行 定制 


car.wheels = 4; 


/[ 保存 到 Vehicle: :driveC) 的 特殊 引用 


var vehDrive = car.drive; 





[| 重 写 Vehicle::drive() 

car.drive = function() { 
vehDrive.call( this ); 
console. log( 


"Rolling on all " + this.wheels + " wheels!" 





); 


return car; 


} 
var myCar = new Car(); 


myCar.drive(); 
// 发 动 引 擎 。 
// 手 担 方向盘 ! 
// 全 速 前 进 ! 


如 你 所 见 ， 首 先 我 们 复制 一 份 Vehicle 父 类 OH) 的 定义 ， 然 后 混和 人 子 类 OR) 的 定 
义 〈 如 果 需 要 的 话 保留 到 父 类 的 特殊 引用 ) ， 然 后 用 这 个 复合 对 象 构建 实例 。 




















调用 new Car() 时 会 创建 一 个 新 对 象 并 绑 定 到 Car 的 this 上 (参见 第 2 

党)。 但 是 因为 我 们 没有 使 用 这 个 对 象 而 是 返回 了 我 们 自己 的 car 对 象 ， 所 
以 最 初 被 创建 的 这 个 对 象 会 被 丢弃 ， 因 此 可 以 不 使 用 new 关键 字 调 用 Car()。 
这 样 做 得 到 的 结果 是 一 样 的 ， 但 是 可 以 避免 创建 并 丢弃 多 余 的 对 象 。 
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4.4.2 EREA 
隐 式 混入 和 之 前 提 到 的 显 式 伪 多 态 很 像 ， 因 此 也 具备 同样 的 问题 。 


A875 PIBIBS RO; 
































var Something - ( 
cool: function() { 
this.greeting - "Hello World"; 
this.count = this.count ? this.count + 1 : 1; 


h 
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Something.cool(); 
Something.greeting; // "Hello World" 
Something.count; // 1 


var Another = { 
cool: function() f 
// 隐 式 把 Something 混入 Another 
Something.cool.call( this ); 
} 
J}; 


Another .cool(); 
Another.greeting; // "Hello World" 
Another.count; // 1 (count 不 是 共享 状态 ) 


通过 在 构造 函数 调用 或 者 方法 调用 中 使 用 Something.cool.call( this )， 我 们 实际 上 “ 借 
用 ”了 函数 Something.cool() 并 在 Another 的 上 下 文中 调用 了 它 (通过 this 绑 定 ， 参 加 


第 2 章 )。 最 终 的 结果 是 Something.cool() 中 的 赋值 操作 都 会 应 用 在 Another 对 象 上 而 不 是 
Something 对 象 上 。 





因此 ， 我 们 把 Something 的 行为 “混入 ”到 了 Another 中 。 


虽然 这 类 技术 利用 了 this 的 重新 绑 定 功能 ， 但 是 Something.cool.call( this ) 仍然 无 法 
变 成 相对 (而 且 更 灵活 的 ) 引用 ， 所 以 使 用 时 千 万 要 小 心 。 通 常 来 说 ， 尽 量 避 免 使 用 这 样 
的 结构 ， 以 保证 代码 的 整洁 和 可 维护 性 。 


4.5 1 


类 是 一 种 设计 模式 。 许 多 语言 提供 了 对 于 面向 类 软件 设计 的 原生 语法 。JavaScript 也 有 类 
似 的 语法 ,但 是 和 其 他 语言 中 的 类 完全 不 同 。 


类 意味 着 复制 。 


传统 的 类 被 实例 化 时 ， 它 的 行为 会 被 复制 到 实例 中 。 类 被 继承 时 ， 行 为 也 会 被 复制 到 子 类 
中 。 


ZE (在 继承 链 的 不 同 层次 名 称 相同 但 是 功能 不 同 的 函数 ) 看 起 来 似乎 是 从 子 类 引用 父 
类 ， 但 是 本 质 上 引用 的 其 实 是 复制 的 结果 。 
JavaScript 并 不 会 〈 像 类 那样 ) 自动 创建 对 象 的 副本 。 


混入 模式 (无 论 显 式 还 是 隐 式 ) 可 以 用 来 模拟 类 的 复制 行为 ， 但 是 通常 会 产生 丑陋 并 且 脆 
弱 的 语法 ， 比 如 显 式 伪 多 态 (0ther0bj.methodName.call(this，...))， 这 会 让 代码 更 加 难 
懂 并 且 难 以 维护 。 






































此 外 ， 显 式 混 
) 








入 
是 对 象 ) 只 能 复 
问题 o 


"oH. TER HS LH BUT Ss EC ER 


实际 上 无 法 完全 模拟 类 的 复制 行为 ， 因 为 对 象 (和 函数 | 


数 本 身 。 忽 视 


这 一 ， 


别 


点 


"^ 





总 地 来 说 ， 在 JavaScript 中 模拟 类 是 得 不 偿 失 的 ， 虽然 能 解决 当前 的 问题 ， 但 是 可 


下 更 多 的 隐患 。 
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第 3 章 和 第 4 章 多 次 提 到 了 [[Prototype]] 链 ， 但 没有 说 它 到 底 是 什么 。 现 在 我 们 来 详细 
介绍 一 下 它 。 


第 4 章 中 介绍 的 所 有 模拟 类 复制 行为 的 方法 ， 如 各 种 混入 ， 都 没有 使 用 
[[Prototype]] 链 机 制 。 








5.1 [[Prototype]] 


JavaScript 中 的 对 象 有 一 个 特殊 的 [[Prototype]] 内 置 属性 ， 其 实 就 是 对 于 其 他 对 象 的 引 
用 。 几 乎 所 有 的 对 象 在 创建 时 [[Prototype]] 属性 都 会 被 赋予 一 个 非 空 的 值 。 
注意 : 很 快 我 们 就 可 以 看 到 ， 对 象 的 [[Prototype]] 链接 可 以 为 空 ， 虽 然 很 少见 。 
思考 下 面 的 代码 : 
var myObject = ( 
a:2 
J; 


myObject.a; // 2 





[[Prototype]] 引用 有 什么 用 呢 ? 在 第 3 章 中 我 们 说 过 ， 当 你 试图 引用 对 象 的 属性 时 会 触发 
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[[Get]] 操作 ， 比 如 my0bject.a。 对 于 默认 的 [[Get]] 操作 来 说， 第 一 步 是 检查 对 象 本 身 是 
否 有 这 个 属性 ， 如 果 有 的 话 就 使 用 它 。 





ES6 中 的 Proxy 超出 了 本 书 的 范围 (但 是 在 本 系列 之 后 的 书 中 会 介绍 )， 但 
是 要 注意 ， 如 果 包 含 Proxy 的 话 ， 我 们 这 里 对 [[Get]] 和 [[Put]] 的 讨论 就 
不 适用 。 

















但 是 如 果 a 不 在 my0bject 中 ， 就 需要 使 用 对 象 的 [[Prototype]] 链 了 。 


对 于 默认 的 [[cet]] 操作 来 说 ， 如 果 无 法 在 对 象 本 身 找到 需要 的 属性 ， 就 会 继续 访问 对 象 
的 [[Prototype]] f£: 

















var anotherObject = { 
a:2 
35 


// 创建 一 个 关联 到 anotherObject 的 对 象 
var myObject = Object.create( anotherObject ); 


myObject.a; // 2 





稍 后 我 们 会 介绍 0bject.create(..) 的 原理 ， 现 在 只 需要 知道 它 会 创建 一 个 
对 象 并 把 这 个 对 象 的 [[Prototype]] 关联 到 指定 的 对 象 。 








现在 myObject 对 象 的 [[Prototype]] 关联 到 了 another0bject。 显 然 my0bject.a 并 不 存在 ， 
但 是 尽管 如 此 ， 属 性 访问 仍然 成 功 地 (在 anotherobject 中 ) 找到 了 值 2。 





但 是 ， 如 果 anotherObject 中 也 找 不 到 a 并 且 [[Prototype]] 链 不 为 空 的 话 ， 就 会 继续 查找 
下 去 ; 


这 个 过 程 会 持续 到 找到 匹配 的 属性 名 或 者 查找 完整 条 [[Prototype]] 链 。 如 果 是 后 者 的 话 ， 
[[Get]] 操作 的 返回 值 是 undefined。 




















使 用 for..in 遍历 对 象 时 原理 和 查找 [[Prototype]] 链 类 似 ， 任 何 可 以 通过 原型 链 访 问 到 
(并 且 是 enumnerable， 参 见 第 3 章 ) 的 属性 都 会 被 枚 举 。 使 用 in 操作 符 来 检查 属性 在 对 象 
中 是 否 存在 时 ， 同 样 会 查找 对 象 的 整 条 原型 链 (无 论 属性 是 否 可 枚 举 ) : 











var anotherObject = { 
a:2 
15 





// 创建 一 个 关联 到 anotherObject 的 对 象 
var myObject = Object.create( anotherObject ); 


for (var k in myObject) ( 
console.log("found: " + k); 

} 

// found: a 


("a" in myObject); // true 


因此 ， 当 你 通过 各 种 语法 进行 属性 查找 时 都 会 查找 [[Prototype]] 链 ， 直 到 找到 属性 或 者 


查找 完整 条 原型 链 。 


5.1.1 Object.prototype 
但 是 到 哪里 是 [[Prototype]] 的 “尽头 ” 呢 ? 
所 有 普通 的 [[Prototype]] 链 最 终 都 会 指向 内 置 的 0bject.prototype。 由 于 所 有 的 “普通 


(内 置 ， 不 是 特定 主机 的 扩展 ) 对 象 都 “ 源 于 ”( 或 者 说 把 [[Prototype]] 链 的 顶端 设置 为 ) 
这 个 0bject.prototype 对 象 ， 所 以 它 包含 JavaScript 中 许多 通用 的 功能 


有 些 功 能 你 应 该 已 经 ns 了 ， 比 如 说 .tostring() 和 .valueOf(), 45 3 章 还 介绍 
过 .hasownProperty(..)。 稍 后 我 们 还 会 介绍 .isPrototype0f(..)， 这 个 你 可 能 不 太 熟 季 


5.1.2 ”属性 设置 和 屏蔽 


第 3 章 提 到 过 ， 给 一 个 对 象 设 置 属 性 并 不 仅仅 是 添加 一 个 新 属性 或 者 修改 已 有 的 属性 值 。 
现在 我 们 完整 地 讲解 一 下 这 个 过 程 : 





myObject.foo = "bar"; 


如 果 myObject 对 象 中 包含 名 为 foo 的 普通 数据 访问 属 | 
性 值 。 


me 


生 ， 这 条 赋值 语句 只 会 修改 已 有 的 属 





如 果 foo 不 是 直接 存在 于 my0bject 中 ，[[Prototype]] 链 就 会 被 过 历 ， 类 似 [[Get]] 操作 。 
如 有 果 原 型 链 上 找 不 到 foo, foo 就 会 被 直接 添加 到 myobject 上 。 




















然而 ， 如 果 foo 存在 于 原型 链 上 层 ， 赋 值 语 句 my0bject.foo = "bar" 的 行为 就 会 有 些 不 同 
(而 且 可 能 很 出 人 意料 ) 。 稍 后 我 们 会 进行 介绍 





如 果 属 性 名 foo 既 出 现在 my0bject 中 也 出 现在 my0bject 的 [[Prototype]] 链 上 层 ， 那 
么 就 会 发 生 屏 项 。my0bject 中 包含 的 foo 属性 会 屏蔽 原型 链 上 层 的 所 有 foo 属性 ， 因 为 
myObject.foo 总 是 会 选择 原型 链 中 最 底层 的 foo 属性 。 





屏蔽 比 我 们 想象 中 更 加 复杂 。 下 面 我 们 分 析 一 下 如 果 foo 不 直接 存在 于 my0bject 中 而 是 存 





1 








在 于 原型 链 上 层 时 my0bject.foo = "bar" 会 出 现 的 三 种 情况 。 





如 果 在 [[Prototype]] 链 上 层 存在 名 为 foo 的 普通 数据 访问 属性 (参见 第 3 章 ) 并 且 没 
有 被 标记 为 只 读 (writable:false)， 那 就 会 直接 在 my0bject 中 添加 一 个 名 为 foo 的 新 
属性 ， 它 是 屏蔽 属性 。 
































. 如 果 在 [[Prototype]] 链 上 层 存 在 foo， 但 是 它 被 标记 为 只 读 (writabte:fatse)， 那 么 


无 法 修改 已 有 属性 或 者 在 myobject 上 创建 屏蔽 属性 。 如 果 运 行 在 严格 模式 下 ， 代 码 会 
抛 出 一 个 错误 。 否 则 ， 这 条 赋值 语句 会 被 忽略 。 总 之 ， 不 会 发 生 屏 蔽 。 





.如果 在 [[Prototype]] 链 上 层 存在 foo 并 且 它 是 一 个 setter (参见 第 3 章 ) ， 那 就 一 定 会 


Z 
调用 这 个 setter, foo 不 会 被 添加 到 (或 者 说 屏蔽 于 ) my0bject， 也 不 会 重新 定义 foo 这 


个 setter。 


大 多 数 开 发 者 都 认为 如 果 向 [[Prototype]] 链 上 层 已 经 存在 的 属性 〈[[Put]]) 赋值 ， 就 一 


定 





会 触发 屏蔽 ， 但 是 如 你 所 见 ， 三 种 情况 中 只 有 一 种 〈 第 一 种 ) 是 这 样 的 。 





如 果 你 希望 在 第 二 种 和 第 三 种 情况 下 也 屏蔽 foo， 那 就 不 能 使 用 = 操作 符 来 赋值 ， 而 是 使 
用 Object.defineProperty(..) (参见 第 3 章 ) 来 向 myObject 添加 foo, 








第 二 种 情况 可 能 是 最 邻 人 意外 的 ， 只 读 属 性 会 阻止 [[Prototype]] 链 下 层 
隐 式 创建 (屏蔽 ) 同名 属性 。 这 样 做 主要 是 为 了 模拟 类 属性 的 继承 。 你 可 
以 把 原型 链 上 层 的 foo 看 作 是 父 类 中 的 属性 ， 它 会 被 ny0bject 继承 〈 复 
制 )， 这 样 一 来 nyobject 中 的 foo 属性 也 是 只 读 ， 所 以 无 法 创建 。 但 是 一 定 
要 注意 ， 实 际 上 并 不 会 发 生 类 似 的 继承 复制 (参见 第 4 章 和 第 5 章 )。 这 看 
起 来 有 点 奇怪 ，my0bject 对 象 竟 然 会 因为 其 他 对 象 中 有 一 个 只 读 foo 就 不 
能 包含 foo 属性 。 更 奇怪 的 是 ， 这 个 限制 只 存在 于 = 赋值 中 ,使 用 Object. 
defineProperty(..) 并 不 会 受到 影响 。 
































如 果 需 要 对 屏蔽 方法 进行 委托 的 话 就 不 得 不 使 用 丑陋 的 显 式 伪 多 态 (参见 第 4 章 )。 通 常 
来 说 ， 使 用 屏蔽 得 不 偿 失 ， 所 以 应 当 尽量 避免 使 用 。 第 6 章 会 介绍 另 一 种 不 使 用 屏蔽 的 更 
加 简洁 的 设计 模式 。 


有 些 情 况 下 会 隐 式 产生 屏蔽 ， 一 定 要 当心 。 思 考 下 面 的 代码 : 








var anotherObject = ( 
a:2 
E 


var myObject - Object.create( anotherObject ); 


anotherObject.a; // 2 
myObject.a; // 2 





anotherObject.hasOwnProperty( "a" ); // true 
myObject.hasOwnProperty( "a" ); // false 


myObject.a++; // 隐 式 屏蔽 ! 


anotherObject.a; // 2 
myObject.a; // 3 


myObject.hasOwnProperty( "a" ); // true 
尽管 my0bject.a++ 看 起 来 应 该 (通过 委托 ) 查找 并 增加 anotherobject.a 属性 ， 但 是 别 忘 
T + 操作 相当 于 myObject.a = myObject.a + 1。 因 此 ++ 操作 首 先 会 通过 [[Prototype]] 


查找 属性 a 并 从 anotherobject.a 获取 当前 属性 值 2， 然 后 给 这 个 值 加 1， 接 着 用 [[Put]] 
THE 3 MRA myobject 中 新 建 的 屏蔽 属性 a, XA 


修改 委托 属性 时 一 定 要 小 心 。 如 果 想 让 anotherobject.a 的 值 增加 ， 唯 一 的 办 法 是 


anotherObject.a++。 
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5.2 类 
现在 你 可 能 会 很 好 奇 : 为 什么 一 个 对 象 需要 关联 到 另 一 个 对 象 ? 这 样 做 有 什么 好 处 ?这 个 
问题 非常 好 ， 但 是 在 回答 之 前 我 们 首先 要 理解 [[Prototype]]“ 不 是 ”什么 。 
第 4 章 中 我 们 说 过 ，JavaScript 和 面向 类 的 语言 不 同 ， 它 并 没有 类 来 作为 对 象 的 抽象 模式 
或 者 说 蓝图 。JavaScript 中 只 有 对 象 。 



































实际 上 ，JavaScript 才 是 真正 应 该 被 称 为 “面向 对 象 ” 的 语言 ， 因 为 它 是 少 有 的 可 以 不 通 
过 类 ， 直 接 创建 对 象 的 语言 。 


在 JavaScript 中 ， 类 无 法 描述 对 象 的 行 ，( 因 为 根本 就 不 存在 类 ! ) 对 象 直接 定义 自己 的 行 
29. HiUi—3m, JavaScript 中 只 有 对 象 。 

















5.2.1 “类 ”函数 
多 年 以 来 ，JavaScript 中 有 一 种 奇怪 的 行为 一 直 在 被 无 耻 地 滥用 ， 那 就 是 模 信 类 。 我 们 会 
仔细 分 析 这 种 方法 。 


这 种 奇怪 的 “类 似 类 ”的 行为 利用 了 函数 的 一 种 特殊 特性 ， 所 有 的 函数 默认 都 会 拥有 一 个 
名 为 prototype 的 公有 并 且 不 可 枚 举 (参见 第 3 3€) 的 属性 ， 它 会 指向 另 一 个 对 象 : 





function Foo() { 
Jf zs 
} 


Foo.prototype; // { ] 





A 
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这 个 对 象 通常 被 称 为 Foo 的 原型 ， 因 为 我 们 通过 名 为 Foo. prototype 的 属性 引用 来 访问 它 。 
然而 不 幸 的 是 ， 这 个 术语 对 我 们 造成 了 极 大 的 误导 ， 稍 后 我 们 就 会 看 到 。 如 有 果 是 我 的 话 就 
会 叫 它 “之 前 被 称 为 Foo 的 原型 的 那个 对 象 ”。 好 吧 我 是 开玩笑 的 ， 你 觉得 “被 贴 上 “Foo 
点 prototype ”标签 的 对 象 ”这 个 名 字 怎 么 样 ? 





抛 开 名 字 不 谈 ， 这 个 对 象 到 底 是 什么 ? 
最 直接 的 解释 就 是 ， 这 个 对 象 是 在 调用 new Foo() (参见 第 2 章 ) 时 创建 的 ， 最 后 会 被 
(有 点 武断 地 ) 关联 到 这 个 “Foo 点 prototype” 对 象 上 。 
我 们 来 验证 一 下 : 

function Foo() { 

I 

} 

var a = new Foo(); 

Object.getPrototypeOf( a ) === Foo.prototype; // true 
调用 new Foo() 时 会 创建 a (具体 的 4 个 步 又 参见 第 2 章 ) ， 其 中 的 一 步 就 是 给 a 一 个 内 部 
的 [[Prototype]] 链接 ， 关 联 到 Foo.prototype 指向 的 那个 对 象 。 
暂停 一 下 ， 仔 细 思 考 这 条 语句 的 含义 。 


在 面向 类 的 语言 中 ， 类 可 以 被 复制 (或 者 说 实例 化 ) 多 次 ， 就 像 用 模具 制作 东西 一 样 。 我 
们 在 第 4 章 中 看 到 过 ， 之 所 以 会 这 样 是 因为 实例 化 (或 者 继承 ) 一 个 类 就 意味 着 “把 类 的 
行为 复制 到 物理 对 象 中 ”， 对 于 每 一 个 新 实例 来 说 都 会 重复 这 个 过 程 。 


但 是 在 JavaScript 中 ， 并 没有 类 似 的 复制 机 制 。 你 不 能 创建 一 个 类 的 多 个 实例 ， 只 能 创建 
多 个 对 象 ， 它 们 [[Prototype]] 关联 的 是 同一 个 对 象 。 但 是 在 默认 情况 下 并 不 会 进行 复制 ， 
因此 这 些 对 象 之 间 并 不 会 完全 失去 联系 ， 它 们 是 互相 关联 的 。 


new Foo() 会 生成 一 个 新 对 象 (我 们 称 之 为 a) ， 这 个 新 对 象 的 内 部 链接 [[Prototype]] 关联 
的 是 Foo.prototype 对 象 。 

















最 后 我 们 得 到 了 两 个 对 象 ， 它 们 之 间 互 相关 联 ， 就 是 这 样 。 我 们 并 没有 初始 化 一 个 类 ， 实 
际 上 我 们 并 没有 从 “类 ”中 复制 任何 行为 到 一 个 对 象 中 ， 只 是 让 两 个 对 象 互 相关 联 。 





实际 上 ， 绝 大 多 数 JavaScript 开发 者 不 知道 的 秘密 是 ，new Foo() 这 个 函数 调用 实际 上 并 没 
有 直接 创建 关联 ， 这 个 关联 只 是 一 个 意外 的 副作用 。new Foo() 只 是 间接 完成 了 我 们 的 目 
标 : 一 个 关联 到 其 他 对 象 的 新 对 象 。 


那么 有 没有 更 直接 的 方法 来 做 到 这 一 点 呢 ? 当然 ! 功臣 就 是 0bject.create(..)， 不 过 我 们 
现在 暂时 不 介绍 它 。 











关于 名 称 
在 JavaScript 中 ， 我 们 并 不 会 将 一 个 对 象 (C) 复制 到 另 一 个 对 象 〔“ 实 例 ”)， 只 是 将 它们 
关联 起 来 。 从 视觉 角度 来 说 ，[[Prototype]] 机 制 如 下 图 所 示 ， 箭 头 从 右 到 左 ， 从 下 到 上 : 


Foo.prototype 




























Bar.prototype 











这 个 机 制 通常 被 称 为 原型 继承 〈 稍 后 我 们 会 分 析 具 体 代码 ) ， 它 常常 被 视 为 动态 语言 版 本 
的 类 继承 。 这 个 名 称 主要 是 为 了 对 应 面向 类 的 世界 中 “继承 ”的 意义 ,但 是 违背 (写作 违 
背 ， 读 作 推 翻 ) 了 动态 脚本 中 对 应 的 语义 。 


“继承 ”这 个 词 会 让 人 产生 非常 强 的 心理 预期 (参见 第 4 章 )。 仅 仅 在 前 面 加 上 “原型 ”并 
不 能 区 分 出 JavaScript 中 和 类 继承 几乎 完全 相反 的 行为 ， 因 此 在 过 去 20 年 中 造成 了 极 大 的 
误解 。 

在 我 看 来 ， 在 “继承 ”前 面 加 上 “原型 ”对 于 事实 的 曲解 就 好 像 一 只 手 拿 橘子 一 只 手 拿 苹 


果然 后 把 苹果 叫 作 “ 红 橘 子 ”一 样 。 无 论 添 加 什么 标签 都 无 法 改变 事实 : 一 种 水 果 是 全 
果 ， 另 一 种 是 橘子 。 


更 好 的 方法 是 直接 把 苹果 叫 作 蔷 
们 的 相似 之 处 以 及 不 同 之 处 ， 因 为 我 们 大 家 都 明白 “苹果 ”的 含义 。 

因此 我 认为 这 个 容易 混淆 的 组 合 术语 “原型 继承 ”( 以 及 使 用 其 他 面向 类 的 术语 比如 
“类 ” “构造 函数 "、“ 实 例 ”、“ 多 态 ”"， 等 等 ) 严重 影响 了 大 家 对 于 JavaScript 机 制 真 实 原 
理 的 理解 。 


















































文 样 有 助 于 理解 它 




















继承 意味 着 复制 操作 ，JavaScript (默认 ) 并 不 会 复制 对 象 属性 。 相 反 ，JavaScript 会 在 两 
个 对 象 之 间 创 建 一 个 关联 ， 这 样 一 个 对 象 就 可 以 通过 委托 访问 另 一 个 对 象 的 属性 和 函数 。 
委托 (参见 第 6 章 ) 这 个 术语 可 以 更 加 准确 地 描述 JavaScript 中 对 象 的 关联 机 制 。 


还 有 个 偶尔 会 用 到 的 JavaScript 术语 差异 继承 。 基 本 原则 是 在 描述 对 象 行为 时 ， 使 用 其 不 
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同 于 普遍 描述 的 特质 。 举 例 来 说 ， 描 述 汽 车 时 你 会 说 汽车 是 有 四 个 轮子 的 一 种 交通 工具 ， 
但 是 你 不 会 重复 描述 交通 工具 具备 的 通用 特性 (比如 引擎 ) 。 


如 果 你 把 JavaScript 中 对 象 的 所 有 委托 行为 都 归结 到 对 象 本 身 并 且 把 对 象 看 作 是 实物 的 话 ， 
那 就 (差不多 ) 可 以 理解 差异 继承 了 。 





但 是 和 原型 继承 一 样 ， 差 异 继承 会 更 多 是 你 脑 中 构建 出 的 模型 ， 而 非 真实 情况 。 它 忽略 了 
一 个 事实 ， 那 就 是 对 象 B 实际 上 并 不 是 被 差异 构造 出 来 的 ， 我 们 只 是 定义 了 B 的 一 些 指 定 
特性 ， 其 他 没有 定义 的 东西 都 变 成 了 “ 洞 "。 而 这 些 洞 (或 者 说 缺少 定义 的 空白 处 ) 最 终 
会 被 委托 行为 “ 填 满 ”。 





默认 情况 下 ， 对 和 象 并 不 会 像 差 异 继承 暗示 的 那样 通过 复制 生成 。 因 此 ， 差 异 继承 也 不 适合 
用 来 描述 JavaScript 的 [[Prototype]] 机 制 。 


当然 ， 如 果 你 喜欢 ， 完 全 可 以 使 用 差异 继承 这 个 术语 ， 但 是 无 论 如 何 它 只 适用 于 你 脑 中 的 
模型 ， 并 不 符合 引擎 的 真实 行为 。 





5.2.2 “构造 函数 ” 
好 了 ， 回 到 之 前 的 代码 : 
function Foo() { 


Hs 
} 


var a = new Foo(); 
到 底 是 什么 让 我 们 认为 Foo 是 一 个 “类 ” 呢 ? 


其 中 一 个 原因 是 我 们 看 到 了 关键 字 new， 在 面向 类 的 语言 中 构造 类 实例 时 也 会 用 到 它 。 另 
一 个 原因 是 ， 看 起 来 我 们 执行 了 类 的 构造 国 数 方法 ，Foo() 的 调用 方式 很 像 初始 化 类 时 类 
构造 函数 的 调用 方式 。 


除了 令 人 迷惑 的 “构造 函数 ”语义 外 ，Foo.prototype 还 有 另 一 个 绝招 。 思 考 下 面 的 代码 : 


























function Foo() { 
T us 
} 


Foo.prototype.constructor === Foo; // true 


var a = new Foo(); 
a.constructor === Foo; // true 


Foo.prototype 默认 (在 代码 中 第 一 行 声明 时 ! ) 有 一 个 公有 并 且 不 可 枚 举 (参见 第 3 章 ) 
的 属性 .constructor， 这 个 属性 引用 的 是 对 象 关联 的 函数 (本 例 中 是 Foo)。 此 外 ， 我 们 








可 以 看 到 通过 “构造 国 数 ” 调 用 new Foo() 创建 的 对 象 也 有 一 个 constructor 属性 ， 指 向 
“创建 这 个 对 象 的 函数 ”。 








实际 上 a 本身 并 没有 .constructor 属性。 而且， 虽然 a.constructor 确实 指 
向 Foo 函数 ， 但 是 这 个 属性 并 不 是 表示 a 由 Foo“ 构 造 ， 稍 后 我 们 会 解释 。 

















哦 耶 ， 好 吧 …… 按 照 JavaScript 世界 的 惯例 ,“ 类 ”名 首 字母 要 大 写 ， 所 以 名 字 写 作 Foo 而 
JẸ foo 似乎 也 提示 它 是 一 个 “类 ”。 显 而 易 见 ， 是 吧 ?! 





这 个 惯例 影响 力 非常 大 ， 以 至 于 如 果 你 用 new 来 调用 小 写 方法 或 者 不 用 new 
调用 首 字母 大 写 的 函数 ， 许 多 JavaScript 开发 者 都 会 责怪 你 。 这 很 令 人 吃惊 ， 
我 们 竟然 会 如 此 努力 地 维护 JavaScript 中 ( 假 )“ 面 向 类 ”的 权力 ， 尽 管 对 于 
JavaScript 引擎 来 说 首 字母 大 写 没有 任何 意义 。 



































1. 构造 函数 还 是 调用 
上 一 段 代 码 很 容易 让 人 认为 Foo 是 一 个 构造 函数 ， 因 为 我 们 使 用 new 来 调用 它 并 且 看 到 它 
“构造 ”了 一 个 对 象 。 


实际 上 ，Foo 和 你 程序 中 的 其 他 函数 没有 任何 区 别 。 函 数 本 身 并 不 是 构造 函数 ， 然 而 ， 当 
你 在 普通 的 函数 调用 前 面 加 上 new 关键 字 之 后 ， 就 会 把 这 个 函数 调用 变 成 一 个 “构造 函数 
调用 ”。 实 际 上 ，new 会 动 持 所 有 普通 函数 并 用 构造 对 象 的 形式 来 调用 它 。 


举例 来 说 : 











function NothingSpecial() { 
console.log( "Don't mind me!" ); 


j 


var a - new NothingSpecial(); 
// "Don't mind me!" 


a; // Q 


NothingSpecial 只 是 一 个 普通 的 函数 ， 但 是 使 用 new 调用 时 ， 它 就 会 构造 一 个 对 象 并 赋值 
a， 这 看 起 来 像 是 new 的 一 个 副作用 (无 论 如 何 都 会 构造 一 个 对 象 ) 。 这 个 调用 是 一 个 构 
函数 调用 ,但 是 NothingSpecial 本 身 并 不 是 一 个 构造 函数 。 


换 句 话说， 在 JavaScript 中 对 于 “构造 函数 ”最 准确 的 解释 是 ， 所 有 带 new 的 函数 调用 。 
函数 不 是 构造 函数 ， 但 是 当 且 仅 当 使 用 new 时 ， 函 数 调用 会 变 成 “构造 函数 调用 ”。 














5.2.3 技术 


我 们 是 不 是 已 经 介绍 了 JavaScript 中 所 有 和 “类 ”相关 的 问题 了 呢 ? 
不 是 。JavaScript 开发 者 绞 尽 脑汁 想 要 模仿 类 的 行为 : 


function Foo(name) f 
this.name - name; 


Foo.prototype.myName = function() { 
return this.name; 


5 
var a - new Foo( "a" ); 
var b = new Foo( "b" ); 


a.myName(); // "a" 
b.myName(); // "b" 


这 段 代 码 展示 了 另外 两 种 “面向 类 ”的 技巧 : 


1. this.name = name 给 每 个 对 象 (也 就 是 a 和 pb， 参见 第 2 章 中 的 this 绑 定 ) 都 添加 
了 .name 属性 ， 有 点 像 类 实例 封装 的 数据 值 。 

2. Foo.prototype.myName = ... 可 能 个 更 有 趣 的 技巧 ， 它 会 给 Foo.prototype 对 象 添 加 一 
个 属性 (函数 )。 现 在 ，a.myName() 可 以 正常 工作 ， 但 是 你 可 能 会 觉得 很 惊讶 ， 这 是 什 
么 原理 呢 ? 








在 这 段 代 码 中 ， 看 起 来 似乎 创建 a fH b 时 会 把 Foo.prototype 对 象 复 制 到 这 两 个 对 象 中 ， 


在 本 章 开头 介绍 默认 [[Get]] 算法 时 我 们 介绍 过 [[Prototype]] 链 ， 以 及 当 属 性 不 直接 存 
在 于 对 象 中 时 如 何 通 过 它 来 进行 查找 。 








因此 ， 在 创建 的 过 程 中 ，a 和 bp 的 内 部 [[Prototype]] 都 会 关联 到 Foo.prototype 上 。 当 a 
fH 中 无 法 找到 myName 时 ， 它 会 〈 通 过 委托 ， 参 见 第 6 章 ) 在 Foo.prototype 上 找到 。 


回顾 “构造 函数 ” 
之 前 讨论 .constructor 属性 时 我 们 说 过 ， 看 起 来 a.constructor === Foo 为 真意 味 着 a 确 
实 有 一 个 指向 Foo 的 .constructor 属性 ， 但 是 事实 不 是 这 样 。 





这 是 一 个 很 不 幸 的 误解 。 实 际 上 ，.constructor 引用 同样 被 委托 给 了 Foo.prototype， 而 
Foo.prototype.constructor 默认 指向 Foo, 


把 .constructor 属性 指向 Foo 看 作 是 a 对 象 由 Foo“ 构 造 ” 非 常 容易 理解 ， 但 这 只 不 过 
是 一 种 虚假 的 安全 感 。a.constructor 只 是 通过 默认 的 [[Prototype]] 委托 指向 Foo, XFN 














“构造 ” 毫 无 关系 。 相 反 ， 对 于 .constructor 的 错误 理解 很 容易 对 你 自己 产生 误导 。 








举例 来 说 ，Foo.prototype 的 .constructor 属性 只 是 Foo 函数 在 声明 时 的 默认 属性 。 如 果 
你 创建 了 一 个 新 对 象 并 替换 了 函数 默认 的 .prototype 对 象 引 用 ， 那 么 新 对 象 并 不 会 自动 获 


得 .constructor 属性 。 

















思考 下 面 的 代码 : 











function Foo() ( /* .. */ ) 
Foo.prototype = ( /* .. */ }; // 创建 一 个 新 原型 对 象 


var al = new Foo(); 
ai.constructor === Foo; // false! 
ai.constructor === Object; // true! 


0bject(..) 并 没有 “构造 ”al1， 对 吧 ? 看 起 来 应 该 是 Foo()“ 构 造 ” 了 它 。 大 部 分 开发 者 
都 认为 是 Foo() 执行 了 构造 工作 ， 但 是 问题 在 于 ， 如 果 你 认为 “constructor” 表 示 “ 由 …… 
构造 ”的 话 ，al.constructor 应 该 是 Foo， 但 是 它 并 不 是 Foo | 


到 底 怎么 回 事 ? al 并 没有 .constructor 属性 ， 所 以 它 会 委托 [[Prototype]] 链 上 的 Foo. 
prototype。 但 是 这 个 对 象 也 没有 .constructor 属性 (不 过 默认 的 Foo.prototype 对 象 有 这 
个 属性 ! ) ， 所 以 它 会 继续 委托 ， 这 次 会 委托 给 委托 链 顶端 的 0bject.prototype。 这 个 对 象 
有 .constructor 属性 ， 指 向 内 置 的 0bject(..) 国 数 。 





错误 观点 已 被 摧毁 。 


当然 ， 你 可 以 给 Foo.prototype 添加 一 个 .constructor 属性 ， 不 过 这 需要 手动 添加 一 个 符 
合 正常 行为 的 不 可 枚 举 (参见 第 3 章 ) 属性 。 


举例 来 说 : 





function Foo() ( /* .. */ ) 
Foo.prototype = ( /* .. */ }; // 创建 一 个 新 原型 对 象 


// 需要 在 Foo.prototype 上 “修复 ”丢失 的 .constructor 属性 
// 新 对 象 属性 起 到 Foo.prototype 的 作用 
// 关于 defineProperty(..)， 参 见 第 3 章 
Object.defineProperty( Foo.prototype, "constructor" , { 
enumerable: false, 
writable: true, 
configurable: true, 
value: Foo // 让 constructor 指向 Foo 


FX 


修复 constructor 需要 很 多 手动 操作 。 所 有 这 些 工作 都 是 源 于 把 “constructor” 错 误 地 理 
为 “由 …… 构造 "， 这 个 误解 的 代价 实在 太 高 了 。 











实际 上 ， 对 象 的 .constructor 会 默认 指向 一 个 国 数 ， 这 个 函数 可 以 通过 对 象 的 prototype 
引用 。 “constructor” 和 “prototype” 这 两 个 词 本 身 的 含义 可 能 适用 也 可 能 不 适用 。 最 好 的 
办 法 是 记 住 这 一 点 “constructor 并 不 表示 被 构造 ”。 








„constructor 并 不 是 一 个 不 可 变 属性 。 它 是 不 可 枚 举 (参见 上 面 的 代码 ) 的 ， 但 是 它 的 值 
是 可 写 的 〈 可 以 被 修改 )。 此 外 ， 你 可 以 给 任意 [[Prototype]] 链 中 的 任意 对 象 添加 一 个 名 
为 constructor 的 属性 或 者 对 其 进行 修改 ， 你 可 以 任意 对 其 赋值 。 

















和 [[Get]] 算法 查找 [[Prototype]] 链 的 机 制 一 样 ，.constructor 属性 引用 的 目标 可 能 和 
尔 想 的 完全 不 同 。 


现在 你 应 该 明白 这 个 属性 多 么 随意 了 吧 ? 





结论 ? 一些 随 意 的 对 象 属性 引用 ， 比 如 al.constructor， 实 际 上 是 不 被 信任 的 ， 它 们 不 一 
定 会 指向 默认 的 函数 引用 。 此 外 ， 很 快 我 们 就 会 看 到 ， 稍 不 留神 al.constructor 就 可 能 会 
指向 你 意 想不到 的 地 方 。 


al.constructor 是 一 个 非常 不 可 靠 并 且 不 安全 的 引用 。 通 党 来 说 要 尽量 避免 使 用 这 些 引 用 。 


5.3 原型) 继承 


我 们 已 经 看 过 了 许多 JavaScript 程序 中 常用 的 模拟 类 行为 的 方法 ， 但 是 如 果 没 有 “继承 ” 
机 制 的 话 ，JavaScript 中 的 类 就 只 是 一 个 空 架子 。 

















实际 上 ， 我 们 已 经 了 解 了 通常 被 称 作 原型 继承 的 机 制 ，a 可 以 “继承 ”Foo.prototype 并 访 
[a] Foo.prototype 的 myName() 函数 。 但 是 之 前 我 们 只 把 继承 看 作 是 类 和 类 之 间 的 关系 ， 并 
没有 把 它 看 作 是 类 和 实例 之 间 的 关系 : 


Foo.prototype 




















还 记得 这 张 图 吗 ， 它 不 仅 展 示 出 对 象 (实例 ) al 到 Foo.prototype 的 委托 关系 ， 还 展示 出 
Bar.prototype 到 Foo.prototype 的 委托 关系 ， 而 后 者 和 类 继承 很 相似 ， 只 有 箭头 的 方向 不 
同 。 图 中 由 下 到 上 的 箭头 表明 这 是 委托 关联 ， 不 是 复制 操作 。 


下 面 这 段 代码 使 用 的 就 是 典型 的 “原型 风格 ”: 








function Foo(name) f 
this.name - name; 


j 


Foo.prototype.myName = function() { 
return this.name; 


h 


function Bar(name,label) { 
Foo.call( this, name ); 
this.label - label; 

} 


// 我 们 创建 了 一 个 新 的 Bar .prototype 对 象 并 关联 到 Foo. prototype 
Bar.prototype = Object.create( Foo.prototype ); 


// 注意 ! 现在 没有 Bar.prototype.constructor 了 
// 如 果 你 需要 这 个 属性 的 话 可 能 需要 手动 修复 一 下 它 








Bar.prototype.myLabel = function() { 
return this.label; 


J; 
var a = new Bar( "a", "obj a" ); 


a.myName(); // "a" 
a.myLabel(); // "obj a" 


如 果 不 明白 为 什么 this 指向 a 的 话 ， 请 查看 第 2. 


这 段 代码 的 核心 部 分 就 是 语句 Bar.prototype = Object.create( Foo.prototype )。 调 用 
Object.create(..) 会 凭空 创建 一 个 “新 ”对 象 并 把 新 对 象 内 部 的 [[Prototype]] 关联 到 你 
指定 的 对 象 (本 例 中 是 Foo.prototype), 


换 句 话说 ， 这 条 语句 的 意思 是 :“ 创 建 一 个 新 的 Bar.prototype 对 象 并 把 它 关 联 到 Foo. 
prototype", 


声明 function Bar() ( .. 时， 和 其 他 国 数 一 样 ，Bar 会 有 一 个 .prototype 关联 到 默认 的 
对 象 ， 但 是 这 个 对 象 并 不 是 我 们 想 要 的 Foo.prototype。 因 此 我 们 创建 了 一 个 新 对 象 并 把 











它 关 联 到 我 们 希望 的 对 象 上 ， 直 接 把 原始 的 关联 对 和 象 抛弃 掉 。 
注意 , 下面 这 两 种 方式 是 常见 的 错误 做 法 ， 实 际 上 它们 都 存在 一 些 问 题 : 

















// 和 你 想 要 的 机 制 不 一 样 ! 
Bar.prototype = Foo.prototype; 





// 基本 上 满足 你 的 需求 ,但 是 可 能 会 产生 一 些 副 作用 :( 


Bar.prototype = new Foo(); 





Bar.prototype = Foo.prototype 并 不 会 创建 一 个 关联 到 Bar.prototype 的 新 对 象 ， 它 只 
是 让 Bar.prototype 直接 引用 Foo.prototype 对 象 。 因 此 当 你 执行 类 似 Bar.prototype. 
myLabel = ... 的 赋值 语句 时 会 直接 修改 Foo.prototype 对 象 本 身 。 显 然 这 不 是 你 想 要 的 结 
果 ， 否 则 你 根本 不 需要 Bar 对 象 ， 直 接 使 用 Foo 就 可 以 了 ， 这 样 代 码 也 会 更 简单 一 些 。 


Bar.prototype = new Foo() 的 确 会 创建 一 个 关联 到 Bar prototype 的 新 对 象 。 但 是 它 使 用 
了 Foo(..) 的 “构造 函数 调用 ”*"， 如 果 函 数 Foo 有 一 些 副 作用 (比如 写 日 志 、 修 改 状态 、 注 
册 到 其 他 对 象 、 给 this 添加 数据 属性 ， 等 等 ) 的 话 ， 就 会 影响 到 Bar() 的 “后 代 ”， 后 果 
不 堪 设 想 。 


因此 ， 要 创建 一 个 合适 的 关联 对 象 ， 我 们 必须 使 用 Object.create(..) 而 不 是 使 用 具有 副 
作用 的 Foo(..)。 这 样 做 唯一 的 缺点 就 是 需要 创建 一 个 新 对 象 然 后 把 旧 对 象 抛弃 掉 ， 不 能 
直接 修改 已 有 的 默认 对 象 。 


如 果 能 有 一 个 标准 并 且 可 靠 的 方法 来 修改 对 象 的 [[Prototype]] 关联 就 好 了 。 在 ES6 之 前 ， 
我 们 只 能 通过 设置 ._proto_ 属性 来 实现 ， 但 是 这 个 方法 并 不 是 标准 并 且 无 法 兼容 所 有 浏 
览 器 。ES6 添加 了 辅助 函数 0bject.setPrototypeof(..)， 可 以 用 标准 并 且 可 靠 的 方法 来 修 
改 关联 。 
































我 们 来 对 比 一 下 两 种 把 Bar.prototype 关联 到 Foo.prototype 的 方法 : 


// ES6 之 前 需要 抛弃 默认 的 Bar prototype 
Bar.ptototype = Object.create( Foo.prototype ); 


// ES6 开始 可 以 直接 修改 现 有 的 Bar prototype 
Object.setPrototypeOf( Bar.prototype, Foo.prototype ); 





如 果 忽 略 掉 Object.create(..) 方法 带 来 的 轻微 性 能 损失 (抛弃 的 对 象 需要 进行 垃圾 回 
收 )， 它 实际 上 比 ES6 及 其 之 后 的 方法 更 短 而 且 可 读 性 更 高 。 不 过 无 论 如 何 ， 这 是 两 种 完 
全 不 同 的 语法 。 


检查 “类 ” 关系 
假设 有 对 象 a， 如 何 寻 找 对 象 a 委托 的 对 象 (如 果 存 在 的 话 ) 呢 ? 在 传统 的 面向 类 环境 中 ， 























检查 一 个 实例 (JavaScript 中 的 对 象 ) 的 继承 祖先 (JavaScript 中 的 委托 关联 ) 通常 被 称 为 
内 省 (或 者 反射 )。 


4875 MER: 














function Foo() { 
LI ss 

} 

Foo.prototype.blah = ...; 

var a - new Foo(); 
我 们 如 何 通过 内 省 找 出 a 的 “祖先 ”( 委 托 关联 ) We? 第 一 种 方法 是 站 在 “类 ”的 角度 来 
判断 : 

a instanceof Foo; // true 
instanceof 操作 符 的 左 操作 数 是 一 个 普通 的 对 象 ， 右 操作 数 是 一 个 国 数 。instanceof 回答 
的 问题 是 : 在 a 的 整 条 [[Prototype]] 链 中 是 否 有 指向 Foo.prototype 的 对 象 ? 














可 异 ， 这 个 方法 只 能 处 理 对 象 (a) 和 函数 ( 带 .prototype 引用 的 Foo) 之 间 的 关系 。 如 
果 你 想 判 断 两 个 对 象 ( 比 如 a 和 b) 之 间 是 否 通过 [[Prototype]] 链 关 联 ， 只 用 instanceof 
无 法 实现 。 





如 果 使 用 内 置 的 .bind(..) 函数 来 生成 一 个 硬 绑 定 函数 (参见 第 2 章 ) 的 话 ， 
该 函数 是 没有 .prototype 属性 的 。 在 这 样 的 函数 上 使 用 instanceof 的 话 ， 
目标 函数 的 .prototype 会 代替 硬 绑 定 函数 的 .prototype。 





通常 我 们 不 会 在 “构造 函数 调用 ”中 使 用 硬 绑 定 函数 ， 不 过 如 果 你 这 么 
做 的 话 ， 实 际 上 相当 于 直接 调用 目标 函数 。 同 理 ， 在 硬 绑 定 国 数 上 使 用 
instanceof 也 相当 于 直接 在 目标 函数 上 使 用 instanceof, 




















z 


下 这 段 充 雇 的 代码 试图 站 在 “类 ”的 角度 使 用 instanceof 来 判断 两 个 对 象 的 关系 : 
// 用 来 判断 01 是 否 关联 到 (EH) o2 的 辅助 函数 


function isRelatedTo(o1, o2) { 
function F(){} 
F.prototype = 02; 
return o1 instanceof F; 


j 














var a = {}; 
var b = Object.create( a ); 


isRelatedTo( b, a ); // true 





A 
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在 isRelatedTo(..) 内 部 我 们 声明 了 一 个 一 次 性 国 数 F， 把 它 的 - prototype 重新 赋值 并 指 
向 对 象 o2， 然 后 判断 o1 是 否 是 F 的 一 个 “实例 ”。 显 而 易 见 ，o1 实际 上 并 没有 继承 F 也 不 
是 由 F 构造 ， 所 以 这 种 方法 非常 思春 并 且 容 易 造 成 误解 。 问 题 的 关键 在 于 思考 的 角度 ， 强 
行 在 JavaScript 中 应 用 类 的 语义 (在 本 例 中 就 是 使 用 instanceof) ib Ais oo REGEL Je) 
面 。 


下 面 是 第 二 种 判断 [[Prototype]] 反射 的 方法 ， 它 更 加 简洁 : 











Foo.prototype.isPrototypeOf( a ); // true 





注意 ， 在 本 例 中 ， 我 们 实际 上 并 不 关心 (甚至 不 需要 ) Foo， 我 们 只 需要 一 个 可 以 用 来 判 
断 的 对 象 (本 例 中 是 Foo.prototype) 就 行 。isPrototypeof(..) 回答 的 问题 是 : 在 a 的 整 
条 [[Prototype]] 链 中 是 否 出 现 过 Foo. prototype ? 





同样 的 问题 ,同样 的 答案 ,但 是 在 第 二 种 方法 中 并 不 需要 间接 引用 函数 (Foo)， 它 
的 .prototype 属性 会 被 自动 访问 。 


我 们 只 需要 两 个 对 象 就 可 以 判断 它们 之 间 的 关系 。 举 例 来 说 : 











// 非常 简单 : b 是 否 出 现在 < 的 [[Prototype]] 链 中 ? 
b.isPrototypeOf( c ); 








注意 ， 这 个 方法 并 不 需要 使 用 函数 (“类 ”)， 它 直接 使 用 b fü c 之 间 的 对 象 引用 来 判断 它 
们 的 关系 。 换 句 话 说， 语言 内 置 的 isPrototypeof(..) 函数 就 是 我 们 的 isRelatedTo(..) ER 
数 。 


我 们 也 可 以 直接 获取 一 个 对 象 的 [[Prototype]] 链 。 在 ES5 中 ， 标 准 的 方法 是 : 








Object.getPrototypeOf( a ); 
可 以 验证 一 下 ， 这 个 对 象 引用 是 否 和 我 们 想 的 一 样 : 
Object.getPrototypeOf( a ) === Foo.prototype; // true 


绝 大 多 数 (不 是 所 有 ! ) 浏览 器 也 支持 一 种 非 标准 的 方法 来 访问 内 部 [[Prototype]] 属性 : 





a. proto  --- Foo.prototype; // true 





这 个 奇怪 的 .proto (Æ ES6 之 前 并 不 是 标准 ! ) 属性 “神奇 地 ”引用 了 内 部 的 
[[Prototype]] 对 象 ， 如 果 你 想 直 接 查找 (其 至 可 以 通过 ,proto . ptoto ... RH ) 
原型 链 的 话 ， 这 个 方法 非常 有 用 。 


和 我 们 之 前 说 过 的 .constructor 一 样 ，.__proto__ 实际 上 并 不 存在 于 你 正在 使 用 的 对 象 中 
(本 例 中 是 a)。 实 际 上 ， 它 和 其 他 的 常用 函数 (.tostring()、.isPrototype0f(..)， 等 等 ) 











一 样 ， 存 在 于 内 置 的 0bject.prototype 中 。( 它 们 是 不 可 枚 举 的 ， 参 见 第 2 章 。) 





此 外 ，.__proto__ 看 起 来 很 像 一 个 属性 ， 但 是 实际 上 它 更 像 一 个 getter/setter (参见 第 3 
AJ), 


.—proto “的 实现 大 致 上 是 这 样 的 《对象 属 性 的 定义 参见 第 3 章 ) : 





Object.defineProperty( Object.prototype, " proto _"，{ 
get: function() ( 
return Object.getPrototypeOf( this ); 
Js 
set: function(o) { 
// ES6 中 的 setPrototypeOf(..) 
Object.setPrototypeOf( this, o ); 
return 0; 


} 
33s 
因此 ,访问 (获取 值 ) a. proto 时， 实际 上 是 调用 了 a. proto ( (调用 getter K 
数 )。 虽 然 getter 函数 存在 于 Object.prototype 对 象 中 ， 但 是 它 的 this 指向 对 象 a (this 
的 绑 定 规则 参见 第 2 章 ) ， 所 以 和 Object.getPrototypeOf( a ) 结果 相同 。 


. proto _ 是 可 设置 属性 ， 之 前 的 代码 中 使 用 ES6 的 0bject.setPrototypeof(..) 进行 设 
置 。 然 而 ， 通 常 来 说 你 不 需要 修改 已 有 对 象 的 [[Prototype]]。 


一 些 框架 会 使 用 非常 复杂 和 高 端的 技术 来 实现 “ 子 类 ”机 制 ， 但 是 通常 来 说 ， 我 们 不 推荐 
这 种 用 法 ， 因 为 这 会 极 大 地 增加 代码 的 阅读 难度 和 维护 难度 。 


ES6 中 的 class 关键 字 可 以 在 内 置 的 类 型 (比如 Array) 上 实现 类 似 “ 子 类 ” 
的 功能 。 详 情 参考 附录 A 中 关于 ES6 中 class 语法 的 介绍 。 














我 们 只 有 在 一 些 特殊 情况 下 (我们 前 面 讨论 过 ) 需要 设置 函数 默认 .prototype 对 象 的 
[[Prototype]]， 让 它 引 用 其 他 对 象 (除了 0bject.prototype)。 这 样 可 以 避免 使 用 全 新 的 
对 象 替 换 默 认 对 象 。 此 外 ， 最 好 把 [[Prototype]] 对 象 关 联 看 作 是 只 读 特 性 ， 从 而 增加 代 
码 的 可 读 性 。 

















JavaScript 社区 up MA 官方 的 称呼 ， 他 们 会 把 类 似 _proto__ 
的 属性 称 为 “笨蛋 (dunder)",. PLA, JavaScript à] A. & FE — proto — IU E 
"E proto", 











5.4 ”对象 关联 

现在 我 们 知道 了 ，[[Prototype]] 机 制 就 是 存在 于 对 象 中 的 一 个 内 部 链接 ， 它 会 引用 其 他 
对 象 。 

通常 来 说 ， 这 个 链接 的 作用 是 : 如 果 在 对 象 上 没有 找到 需要 的 属性 或 者 方法 引用 ， 引 擎 就 
会 继续 在 [[Prototype]] 关联 的 对 象 上 进行 查找 。 同 理 ， 如 果 在 后 者 中 也 没有 找到 需要 的 
引用 就 会 继续 查找 它 的 [[Prototype]]， 以 此 类 推 。 这 一 系列 对 象 的 链接 被 称 为 “原型 链 ”。 


5.4.1 创建 关联 


我 们 已 经 明白 了 为 什么 JavaScript 的 [[Prototype]] 机 制 和 类 不 一 样 ， 也 明白 了 它 如 何 建立 
对 象 间 的 关联 。 























那 [[Prototype]] 机 制 的 意义 是 什么 呢 ? 为 什么 JavaScript 开发 者 费 这 么 大 的 力气 (模拟 
类 ) 在 代码 中 创建 这 些 关 联 呢 ? 
还 记得 吗 ， 本 章 前 面 曾 经 说 过 0bject.create(..) 是 一 个 大 英雄 ， 现 在 是 时 候 来 弄 明 白 为 
什么 了 : 
var foo = ( 
something: function() { 
console.log( "Tell me something good..." ); 


} 
h 


var bar = Object.create( foo ); 


bar.something(); // Tell me something good... 





Object.create(..) 会 创建 一 个 新 对 象 (bar) 并 把 它 关 联 到 我 们 指定 的 对 象 (foo), 3X TÉ 
我 们 就 可 以 充分 发 挥 [[Prototype]] 机 制 的 威力 (委托 ) 并 且 避 免 不 必 要 的 麻烦 (比如 使 
用 new 的 构造 函数 调用 会 生成 -prototype 和 .constructor 引用 ) 。 








Object.create(null) 会 创建 一 个 拥有 空 (或 者 说 null) [[Prototype]] 
链接 的 对 象 ， 这 个 对 象 无 法 进行 委托 。 由 于 这 个 对 象 没有 原型 链 ， 所 以 
instanceof 操作 符 (之 前 解释 过 ) 无 法 进行 判断 ， 因 此 总 是 会 返回 false。 
这 些 特殊 的 空 [[Prototype]] 对 象 通常 被 称 作 “字典 “， 它 们 完全 不 会 受到 原 
型 链 的 干扰 ， 因 此 非常 适合 用 来 存储 数据 。 












































我 们 并 不 需要 类 来 创建 两 个 对 象 之 间 的 关系 ， 只 需要 通过 委托 来 关联 对 象 就 足够 了 。 而 
Object.create(..) 不 包含 任何 “类 的 诡计 ”， 所 以 它 可 以 完美 地 创建 我 们 想 要 的 关联 关系 。 





0bject.create() 的 polyfil 代 码 

Object.create(..) 是 在 ES5 中 新 增 的 函数 ， 所 以 在 ES5 之 前 的 环境 中 (比如 旧 IE) 如 
果 要 支持 这 个 功能 的 话 就 需要 使 用 一 段 简单 的 polyfill 代码 ， 它 部 分 实现 了 0bject. 
create(..) 的 功能 : 





if (!Object.create) { 
Object.create = function(o) { 
function F()() 
F.prototype - 0; 
return new F(); 
E 
} 


XX Bt polyfill 代码 使 用 了 一 个 一 次 性 函数 F， 我 们 通过 改写 它 的 .prototype 属性 使 其 指向 想 
要 关联 的 对 象 ， 然 后 再 使 用 new FO 来 构造 一 个 新 对 象 进行 关联 。 








由 于 0bject.create(..c) 可 以 被 模拟 ， 因 此 这 个 函数 被 应 用 得 非常 广泛 。 标 准 ES5 中 内 
置 的 Object.create(..) 函数 还 提供 了 一 系列 附加 功能 ， 但 是 ES5 之 前 的 版 本 不 支持 这 些 
功能 。 通 常 来 说 ， 这 些 功能 的 应 用 范围 要 小 得 多 ， 但 是 出 于 完整 性 考虑 ， 我 们 还 是 介绍 一 
T: 











var anotherObject = { 
a:2 
3 


var myObject = Object.create( anotherObject, { 
bi 
enumerable: false, 
writable: true, 
configurable: false, 


value: 3 

Ts 

es 
enumerable: true, 
writable: false, 
configurable: false, 
value: 4 

} 

T5 


myObject.hasOwnProperty( "a" ); // false 
myObject.hasOwnProperty( "b" ); // true 
myObject.hasOwnProperty( "c" ); // true 


myObject.a; // 2 


myObject.b; // 3 
myObject.c; // 4 


Object.create(..) 的 第 二 个 参数 指定 了 需要 添加 到 新 对 象 中 的 属性 名 以 及 这 些 属性 的 属性 
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描述 符 (参见 第 3 章 )。 因 为 ES5 之 前 的 版 本 无 法 模拟 属性 操作 符 ， 所 以 polyfill 代码 无 法 
实现 这 个 附加 功能 


通常 来 说 并 不 会 使 用 0bject.create(..) 的 附加 功能 ， 所 以 对 于 大 多 数 开发 者 来 说 ， 上 面 
那 段 polyfill 代码 就 足够 了 。 





有 些 开发 者 更 加 严谨 ， 他 们 认为 只 有 能 被 完全 模拟 的 函数 才 应 该 使 用 polyfill 代码 。 由 于 
0bject.create(..) 是 只 能 部 分 模拟 的 函数 之 一 ， 所 以 这 些 狭隘 的 人 认为 如 果 你 需要 在 ES5 
之 前 的 环境 中 使 用 Object.create(..) 的 特性 ， 那 不 要 使 用 polyfill 代码 ， 而 是 使 用 一 个 自 
定义 国 数 并 且 名 字 不 能 是 bbject.create。 你 可 以 把 你 自己 的 函数 定义 成 这 样 : 























function createAndLinkObject(o) { 
function F(){} 
F.prototype = 0o; 
return new F(); 


} 

var anotherObject = ( 
a:2 

5 


var myObject - createAndLinkObject( anotherObject ); 


myObject.a; // 2 





我 并 不 赞同 这 个 严格 的 观点 ， 相 反 ， 我 很 赞同 在 ESS 中 使 用 上 面 那 段 polyfill 代码 。 如 何 
选择 取决 于 你 。 


5.4.2 关联 关系 是 备用 
看 起 来 对 象 之 间 的 关联 关系 是 处 理 “ 缺 失 ” 属 性 或 者 方法 时 的 一 种 备用 选项 。 这 个 说 法 有 
点 道理 ， 但 是 我 认为 这 并 不 是 [[Prototype]] 的 本 质 。 


思考 下 面 的 代码 : 

















var anotherObject = { 
cool: function() { 
console.log( "cool!" ); 
J 
E 


var myObject - Object.create( anotherObject ); 


myObject.cool(); // "cool!" 





由 于 存在 [[Prototype]] 机 制 ， 这 段 代 码 可 以 正常 工作 。 但 是 如 果 你 这 样 写 只 是 为 了 让 
myObject 在 无 法 处 理 属性 或 者 方法 时 可 以 使 用 备用 的 anotherobject， 那 么 你 的 软件 就 会 




















变 得 有 点 “神奇 "， 而 且 很 难 理解 和 维护 。 








这 并 不 是 说 任何 情况 下 都 不 应 该 选择 备用 这 种 设计 模式 ,但 是 这 在 JavaScript 中 并 不 是 很 
常见 。 所 以 如 果 你 使 用 的 是 这 种 模式 ， 那 或 许 应 当 退 后 一 步 并 重新 思考 一 下 这 种 模式 是 否 


合适 。 








在 ES6 中 有 一 个 被 称 为 “代理 ”(Proxy) 的 高 端 功 能 ， 它 实现 的 就 是 “方法 
无 法 找到 ”时 的 行为 。 代 理 超出 了 本 书 的 讨论 范围 ， 但 是 在 本 系列 之 后 的 书 
中 会 介绍 














千 万 不 要 忽略 这 个 微妙 但 是 非常 重要 的 区 别 。 

















当 你 给 开发 者 设计 软件 时 ， 假 设 要 调用 my0bject.cool()， 如 果 myobject 中 不 存在 cool() 
时 这 条 语句 也 可 以 正常 工作 的 话 ， 那 你 的 API 设计 就 会 变 得 很 “神奇 "， 对 于 未 来 维护 你 
软件 的 开发 者 来 说 这 可 能 不 太 好 理解 。 





但 是 你 可 以 让 你 的 API 设计 不 那么 “神奇 "， 同 时 仍然 能 发 挥 [[Prototype]] 关联 的 威力 : 


var anotherObject = { 
cool: function() { 
console.log( "cool!" ); 
} 


J; 

var myObject = Object.create( anotherObject ); 

myObject.doCool = function() { 

this.cool(); // 内 部 委托 ! 

myObject.doCool(); // "cool!" 
这 里 我 们 调用 的 myobject.doCool() 是 实际 存在 于 myobject 中 的 ， 这 可 以 让 我 们 的 API E 
计 更 加 清晰 (不 那么 “神奇 ")。 从 内 部 来 说 ， 我 们 的 实现 遵循 的 是 委托 设计 模式 (参见 第 
6 章 )， 通 过 [[Prototype]] 委托 到 anotherObject.cool(), 
换 名 话说， 内 部 委托 比 起 直接 委托 可 以 让 API 接口 设计 更 加 清晰 。 下 一 章 我 们 会 详细 解释 
委托 。 


5.5 iN 


如 果 要 访问 对 象 中 并 不 存在 的 一 个 属性 ，[[Get]] 操作 (参见 第 3 章 ) 就 会 查找 对 象 内 部 
[[Prototype]] 关联 的 对 象 。 这 个 关联 关系 实际 上 定义 了 一 条 “原型 链 ”( 有 点 像 租 套 的 作 








用 域 链 ) ， 在 查找 属性 时 会 对 它 进 行 过 历 。 


所 有 普通 对 象 都 有 内 置 的 0bject.prototype， 指 向 原型 链 的 顶端 〈 比 如 说 全 局 作用 域 ) Au 
果 在 原型 链 中 找 不 到 指定 的 属性 就 会 停止 。toString()、valueof() 和 其 他 一 些 通用 的 功能 





都 存在 于 Object.prototype 对 象 上 ， 





因此 语言 中 所 有 的 对 象 都 可 以 使 用 它们 。 


关联 两 个 对 象 最 常用 的 方法 是 使 用 new 关键 词 进行 函数 调用 ， 在 调用 的 4 个 步骤 (第 2 
章 ) 中 会 创建 一 个 关联 其 他 对 象 的 新 对 象 。 











使 用 new 调用 函数 时 会 把 新 对 象 的 .prototype 属性 关联 到 “其 他 对 象 ”。 带 new 的 函数 调用 


通常 被 称 为 “构造 函数 调用 "， 尽 管 它们 实际 上 和 传统 面向 类 语言 中 的 类 构造 函数 不 一 样 。 























虽然 这 些 JavaScript 机 制 和 传统 面向 类 语言 中 的 “类 初始 化 ”和 “类 继承 ”很 相似 ， 但 
是 JavaScript 中 的 机 制 有 一 个 核心 区 别 ， 那 就 是 不 会 进行 复制 ， 对 象 之 间 是 通过 内 部 的 


[[Prototype]] 链 关联 的 。 








出 于 各 种 原因 ， 以 “继承 ”结尾 的 术语 (包括 “原型 继承 ”) 和 其 他 面向 对 象 的 术语 都 无 





法 帮助 你 理解 JavaScript 的 真实 机 制 (不 仅仅 是 限制 我 们 的 思维 模式 )。 














相 比 之 下 ,，“ 委 托 ” 是 一 个 更 合适 的 术语 ， 因 为 对 象 之 间 的 关系 不 是 复制 而 是 委托 。 





第 6 章 


行为 委托 





第 5 章 详细 介绍 了 [[Prototype]] 机 制 并 说 明了 为 什么 在 “类 ”或 者 “继承 ”的 背景 下 
讨论 [[Prototype]] 容易 产生 误解 (这 种 不 恰当 的 方式 已 经 持续 了 20 年 )。 我 们 搞 清 
楚 了 繁杂 的 语法 (各 种 .prototype 代码 )， 也 见识 了 各 种 各 样 的 陷阱 (比如 出 人 意料 
的 .constructor 和 丑陋 的 伪 多 态 语法 ) ， 我 们 还 看 到 了 用 来 解决 这 些 问 题 的 各 种 “混入 ” 
方法 。 





你 可 能 会 很 好 奇 ， 为 什么 看 起 来 简单 的 事情 会 变 得 这 么 复杂 。 现 在 我 们 会 把 帘子 拉 开 ， 看 
看 后 面 到 底 有 什么 。 不 出 意外 ， 绝 大 多 数 JavaScript 开发 者 从 来 没有 如 此 深入 地 了 解 过 
JavaScript， 他 们 只 是 把 这 些 交 给 一 个 “类 ” 库 来 处 理 。 





现在 ， 我 希望 你 不 仅 满 足 于 掩盖 这 些 细 方 并 把 它们 交 给 一 个 “ 黑 盒 ” 库 。 忘 掉 令 人 困惑 的 
类 ， 我 们 用 一 种 更 加 简单 直接 的 方法 来 深入 发 据 一 下 JavaScript 中 对 象 的 [[Prototype]] BL 
制 到 底 是 什么 。 


首先 简单 回顾 一 下 第 5 章 的 结论 : [[Prototype]] 机 制 就 是 指 对 象 中 的 一 个 内 部 链接 引用 
另 一 个 对 象 。 


如 果 在 第 一 个 对 象 上 没有 找到 需要 的 属性 或 者 方法 引用 ， 引 擎 就 会 继续 在 [[Prototype]] 
关联 的 对 象 上 进行 查找 。 同 理 ， 如 果 在 后 者 中 也 没有 找到 需要 的 引用 就 会 继续 查找 它 的 
[[Prototype]]， 以 此 类 推 。 这 一 系列 对 象 的 链接 被 称 为 “原型 链 。 











换 名 话说 ，JavaScript 中 这 个 机 制 的 本 质 就 是 对 象 之 间 的 关联 关系 。 
这 个 观点 对 于 理解 本 章 的 内 容 来 说 是 非常 基础 并 且 非 常 重要 的 。 
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6.1. 面 回 委 托 的 设计 


为 了 更 好 地 学 习 如 何 更 直观 地 使 用 [[Prototype]]， 我 们 必须 认识 到 它 代表 的 是 一 种 不 同 
于 类 (参见 第 4 章 ) 的 设计 模式 。 





面向 类 的 设计 中 有 举 原 则 依然 有 效 ， 因 此 不 要 把 所 有 知识 都 抛 掉 。( 只 需要 
抛 掉 大 部 分 就 够 了 ! ) 举例 来 说 ， 封 装 是 非常 有 用 的 ， 它 同样 可 以 应 用 在 委 
托 中 〈 虽 然 不 太 常 见 ) 。 











我 们 需要 试 着 把 思路 从 类 和 继承 的 设计 模式 转换 到 委托 行为 的 设计 模式 。 如 有 果 你 在 学 习 或 
者 工作 的 过 程 中 几乎 一 直 在 使 用 类 ， 那 转换 思路 可 能 不 太 自 然 并 且 不 太 和 舒服。 你 可 能 需要 
多 重复 几 次 才能 熟悉 这 种 思维 模式 。 


首先 我 会 带 你 们 进行 一 些 理论 训练 ， 然 后 再 传授 一 些 能 够 应 用 在 代码 中 的 具体 实例 。 











6.1.1 类 理论 
假设 我 们 需要 在 软件 中 建 模 一 些 类 似 的 任务 “XYZ”, "ABC" ^5). 


如 果 使 用 类 ， 那 设计 方法 可 能 是 这 样 的 : 定义 一 个 通用 父 (AE) 类 ， 可 以 将 其 命名 为 
Task, Æ Task 类 中 定义 所 有 任务 都 有 的 行为 。 接 着 定义 子 类 XYZ 和 ABC， 它们 都 继承 自 
Task 并 且 会 添加 一 些 特殊 的 行为 来 处 理 对 应 的 任务 。 


非常 重要 的 是 ， 类 设计 模式 鼓励 你 在 继承 时 使 用 方法 重 写 (和 多 态 )， 比 如 说 在 xvz 任务 
中 重 写 Task 中 定义 的 一 些 通用 方法 ， 其 至 在 添加 新 行为 时 通过 super 调用 这 个 方法 的 原始 
版 本 。 你 会 发 现 许多 行为 可 以 先 “ 抽 象 ” 到 父 类 然后 再 用 子 类 进行 特殊 化 ( 重 写 )。 

















下 面 是 对 应 的 伪 代 码 : 


class Task { 
id; 


// 构造 函数 Task() 

Task(ID) { id = ID; } 

outputTask() { output( id ); } 
} 


class XYZ inherits Task { 
label; 


// 构造 函数 XYZ) 
XYZ(ID,Label) { super( ID ); label = Label; } 
outputTask() { super(); output( label ); } 
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class ABC inherits Task { 
]H x 
} 


现在 你 可 以 实例 化 子 类 xvz 的 一 些 副本 然后 使 用 这 些 实例 来 执行 任务 “XYZ”。 这 些 实例 
会 复制 Task 定义 的 通用 行为 以 及 XYz 定义 的 特殊 行为 。 同 理 ，ABC 类 的 实例 也 会 复制 Task 
的 行为 和 ABC 的 行为 。 在 构造 完成 后 ， 你 通常 只 需要 操作 这 些 实例 (而 不 是 类 )， 因 为 每 
个 实例 都 有 你 需要 完成 任务 的 所 有 行为 。 





6.1.2 ”委托 理论 

但 是 现在 我 们 试 着 来 使 用 委托 行为 而 不 是 类 来 思考 同样 的 问题 。 

首先 你 会 定义 一 个 名 为 Task 的 对 象 (和 许多 JavaScript 开发 者 告诉 你 的 不 同 ， 它 既 不 是 类 
也 不 是 函数 )， 它 会 包含 所 有 任务 都 可 以 使 用 (写作 使 用 ， 读 作 委 托 ) 的 具体 行为 。 接 着 ， 
对 于 每 个 任务 (“XYZ”、“ABC”) 你 都 会 定义 一 个 对 象 来 存储 对 应 的 数据 和 行为 。 你 会 把 
特定 的 任务 对 象 都 关联 到 Task 功能 对 象 上 ， 让 它们 在 需要 的 时 候 可 以 进行 委托 。 
基本 上 你 可 以 想象 成 ， 执 行 任务 “XYZ” 需 要 两 个 兄弟 对 象 (XYz 和 Task) 协作 完成 。 但 
是 我 们 并 不 需要 把 这 些 行为 放 在 一 起 ， 通 过 类 的 复制 ， 我 们 可 以 把 它们 分 别 放 在 各 自 独立 
的 对 象 中 ， 需 要 时 可 以 允许 XYz 对 象 委托 给 Task, 


下 面 是 推荐 的 代码 形式 ， 非 常 简单 : 

















Task = ( 

setID: function(ID) { this.id = ID; }, 

outputID: function() { console.log( this.id ); } 
5 


// 让 XYZ 委托 Task 
XYZ = Object.create( Task ); 


XYZ.prepareTask = function(ID,Label) { 
this.setID( ID ); 
this.label - Label; 

5 


XYZ.outputTaskDetails = function() { 
this.outputID(); 
console.log( this.label ); 

5 


// ABC = Object.create( Task ); 
Il ABE 2m 


TE X Be [CR rp, Task 和 XYz 并 不 是 类 (或 者 函数 )， 它 们 是 对 象 。XYz 通过 Object. 
create(..) 创建 ， 它 的 [[Prototype]] 委托 了 Task 对 象 (参见 第 5 章 )。 











相 比 于 面向 类 〈 或 者 说 面向 对 象 )， 我 会 把 这 种 编码 风格 称 为 “对 象 关联 ”(OLOO， 
objects linked to other objects) 。 我 们 真正 关心 的 只 是 XYZ 对 象 (和 ABC HR) 委托 了 
Task 对 象 。 





在 JavaScript 中 ，[[Prototype]] 机 制 会 把 对 象 关 联 到 其 他 对 象 。 无 论 你 多 么 努力 地 说 服 自 














己 ，JavaScript 中 就 是 没有 类 似 “ 类 ”的 抽象 机 制 。 这 有 点 像 逆流 而 上 : 你 确实 可 以 这 么 
做 ， 但 是 如 果 你 选择 对 抗 事实 ， 那 要 达到 目的 就 显然 会 更 加 困难 。 


对 象 关联 风格 的 代码 还 有 一 些 不 同 之 处 。 


1. 








在 上 面 的 代码 中 ，id 和 label 数据 成 员 都 是 直接 存储 在 XYz 上 (而 不 是 Task)。 通 常 
Kik, Æ [[Prototype]] 委托 中 最 好 把 状态 保存 在 委托 者 (XYZ, ABC) 而 不 是 委托 目标 
(Task) 上 。 

















. 在 类 设计 模式 中 ， 我 们 故意 让 父 类 (Task) MPR (XYz) 中 都 有 outputTask Fik, X 





样 就 可 以 利用 重 写 (多 态 ) 的 优势 。 在 委托 行为 中 则 恰好 相反 : 我 们 会 尽量 避免 在 
[[Prototype]] 链 的 不 同 级 别 中 使 用 相同 的 命名 ， 否 则 就 需要 使 用 笨拙 并 且 脆 弱 的 语法 
来 消除 引用 歧义 (参见 第 4 章 )。 

这 个 设计 模式 要 求 尽量 少 使 用 容易 被 重 写 的 通用 方法 名 ， 提 倡 使 用 更 有 描述 性 的 方法 
名 ,尤其 是 要 写 清 相应 对 象 行为 的 类 型 。 这 样 做 实际 上 可 以 创建 出 更 容易 理解 和 维护 的 
代码 ， 因 为 方法 名 (不仅 在 定义 的 位 置 ， 而 是 贯穿 整个 代码 ) 更 加 清晰 ( 自 文档 )。 





.this.setID(ID); XYZ 中 的 方法 首先 会 寻找 XYz 自身 是 否 有 setID(..), 但 是 XYZ 中 并 没 





有 这 个 方法 名 ， 因 此 会 通过 [[Prototype]] 委托 关联 到 Task 继续 寻找 ， 这 时 就 可 以 找到 
setID(..) 方法 。 此 外 ， 由 于 调用 位 置 触发 了 this 的 隐 式 绑 定 规则 (参见 第 2 章 )， 因 
此 虽然 setID(..) 方法 在 Task 中 ， 运 行 时 this 仍然 会 绑 定 到 XYz， 这 正 是 我 们 想 要 的 。 
在 之 后 的 代码 中 我 们 还 会 看 到 this.outputID()， 原 理 相同 。 








换 名 话说， 我 们 和 XYz 进行 交互 时 可 以 使 用 Task 中 的 通用 方法 ， 因 为 XYZ 委托 了 Task, 


委托 行为 意味 着 某 些 对 象 (XYz) 在 找 不 到 属性 或 者 方法 引用 时 会 把 这 个 请 求 委托 给 另 一 
个 对 象 (Task)。 


这 是 一 种 极其 强大 的 设计 模式 ， 和 父 类 、 子 类 、 继 承 、 多 态 等 概念 完全 不 同 。 在 你 的 脑海 中 
对 象 并 不 是 按照 父 类 到 子 类 的 关系 垂直 组 织 的 ， 而 是 通过 任意 方向 的 委托 关联 并 排 组 织 的 。 





fr API 接口 的 设计 中 ， 委 托 最 好 在 内 部 实现 ， 不 要 直接 暴露 出 去 。 在 之 前 的 
例子 中 我 们 并 没有 让 开发 者 通过 API 直接 调用 XYz.setID()。( 当 然 ， 可 以 这 
么 做 ! ) 相反 ， 我 们 把 委托 隐藏 在 了 API 的 内 部 ，XYZ.prepareTask(..) 会 
委托 Task.setID(..)。 更 多 细节 参见 5.4.2 节 。 
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1. 互相 委托 〈 禁 止 ) 
你 无 法 在 两 个 或 两 个 以 上 互相 (双向) 委托 的 对 象 之 间 创 建 御 环 委托 。 如 果 你 把 B 关联 到 
A 然后 试 着 把 A 关联 到 B， 就 会 出 错 。 


很 遗憾 〈 并 不 是 非常 出 平 意料 ， 但 是 有 点 烦人 ) 这 种 方法 是 被 禁止 的 。 如 果 你 引用 了 一 个 
两 边 都 不 存在 的 属性 或 者 方法 ， 那 就 会 在 [[Prototype]] 链 上 产生 一 个 无 限 递归 的 循环 。 
但 是 如 果 所 有 的 引用 都 被 严格 限制 的 话 ，B 是 可 以 委托 A 的 ， 反 之 亦 然 。 因 此 ， 互 相 委 托 
理论 上 是 可 以 正常 工作 的 ， 在 某 些 情况 下 这 是 非常 有 用 的 。 


之 所 以 要 禁止 互相 委托 ， 是 因为 引擎 的 开发 者 们 发 现在 设置 时 检查 (并 禁止 ! ) 一 次 无 限 
循环 引用 要 更 加 高 效 ， 否 则 每 次 从 对 象 中 查找 属性 时 都 需要 进行 检查 。 

2. 调试 

我 们 来 简单 介绍 一 个 容易 让 开发 者 感到 迷惑 的 细节 。 通 常 来 说 ，JavaScript 规范 并 不 会 控 
制 浏览 器 中 开发 者 工具 对 于 特定 值 或 者 结构 的 表示 方式 ， 浏 览 器 和 引擎 可 以 自己 选择 合适 
的 方式 来 进行 解析 ， 因 此 浏览 器 和 工具 的 解析 结果 并 不 一 定 相 同 。 比 如 ， 下 面 这 段 代 码 的 
结果 只 能 在 Chrome 的 开发 者 工具 中 才能 看 到 。 


这 有 段 传统 的 “类 构造 函数 ”JavaScript 代码 在 Chrome 开发 者 工具 的 控制 台中 结果 如 下 所 示 : 















































Id 




















nd 














function Foo() {} 

var al = new Foo(); 

al; // Foo {} 
我 们 看 代码 的 最 后 一 行 : 表达 式 al 的 输出 是 Foo 人。 如 果 你 在 Firefox 中 运行 同样 的 代码 
会 得 到 Object {j。 为 什么 会 这 样 呢 ? 这 些 输出 是 什么 意思 呢 ? 
Chrome 实际 上 想 说 的 是 “fi 是 一 个 空 对 象 ， 由 名 为 Foo 的 函数 构造 ”"。Firefox 想 说 的 是 “ 癸 
是 一 个 空 对 象 ， 由 Object 构造 。 之 所 以 有 这 种 细微 的 差别 ， 是 因为 Chrome 会 动态 跟踪 并 把 
实际 执行 构造 过 程 的 国 数 名 当 作 一 个 内 置 属性 ， 但 是 其 他 浏览 器 并 不 会 跟踪 这 些 额 外 的 信息 。 


看 起 来 可 以 用 JavaScript 的 机 制 来 解释 Chrome 的 跟踪 原理 : 








function Foo() {} 
var al = new Foo(); 


al.constructor; // Foo()[] 
ad.constructor.name; // "Foo" 


Chrome 是 不 是 直接 输出 了 对 象 的 .constructor.name 呢 ? 今 人 迷惑 的 


不 是 ” 


思考 下 面 的 代码 : 


gu 
m 
HB 
gu 
E 
Fin 
sl 

















function Foo() {} 
var al = new Foo(); 
Foo.prototype.constructor = function Gotcha()[); 


al.constructor; // Gotcha(){} 
ai.constructor.name; // "Gotcha" 


ai; // Foo {} 





即使 我 们 把 a1.constructor.name 修改 为 另 一 个 合理 的 值 (Gotcha), Chrome 控制 台 仍 然 会 
输出 Foo。 











看 起 来 之 前 那个 问题 (是 否 使 用 .constructor.name ? ) 的 答案 是 “不 是 ”; Chrome 在 内 
部 肯定 是 通过 另 一 种 方式 进行 跟踪 。 


别 着 急 ! 我 们 先 看 看 下 面 这 段 代码 : 





var Foo = (); 

var al = Object.create( Foo ); 

a1; // Object {} 

Object.defineProperty( Foo, "constructor", { 
enumerable: false, 


value: function Gotcha()(] 
p; 


a1; // Gotcha {} 
WS! 抓 到 你 了 (Gotcha 的 意思 就 是 抓 到 你 了 ) ! 本 例 中 Chrome 的 控制 台 确 实 使 用 


了 .constructor.name。 实 际 上 ， 在 编写 本 书 时 ， 这 个 行为 被 认定 是 Chrome 的 一 个 bug, 
当 你 读 到 此 书 时 ， 它 可 能 已 经 被 修复 了 。 所 以 你 看 到 的 可 能 是 a1; // Object {}。 





除了 这 个 bug, Chrome 内 部 跟踪 (只 用 于 调试 输出 )“ 构 造 函 数 名 称 ” 的 方法 是 Chrome 
自身 的 一 种 扩展 行为 ， 并 不 包含 在 JavaScript 的 规范 中 。 


如 果 你 并 不 是 使 用 “构造 函数 ”来 生成 对 象 ， 比 如 使 用 本 章 介 绍 的 对 象 关联 风格 来 编写 代 
码 ， 那 Chrome 就 无 法 跟踪 对 象 内 部 的 “构造 函数 名 称 ”， 这 样 的 对 象 输出 是 Object {}, 
意思 是 “0bject() 构造 出 的 对 象 ”。 


当然 ， 这 并 不 是 对 象 关 联 风格 代码 的 缺点 。 当 你 使 用 对 象 关 联 风格 来 编写 代码 并 使 用 行 
为 委托 设计 模式 时 ， 并 不 需要 关注 是 谁 “ 构 造 了 ”对 象 (就 是 使 用 new 调用 的 那个 也 数 ) 。 
只 有 使 用 类 风格 来 编写 代码 时 Chrome 内 部 的 “构造 函数 名 称 ” 跟 踪 才 有 意义 ， 使 用 对 象 
关联 时 这 个 功能 不 起 任何 作用 。 
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6.1.8 比较 思维 模型 


现在 你 已 经 明白 了 “类 ”和 “委托 ”这 两 种 设计 模式 的 理论 区 别 ， 








思维 模型 方面 的 区 别 。 














接 下 来 我 们 看 看 它们 在 


我 们 会 通过 一 些 示 例 (Foo, Bar) 代码 来 比较 一 下 两 种 设计 模式 (面向 对 象 和 对 象 关 联 ) 


具体 的 实现 方法 。 下 面 是 典型 的 “原型”) 面向 对 象 风 格 : 


function Foo(who) f 
this.me - who; 


Foo.prototype.identify - function() ( 
return "I am " + this.me; 


h 


function Bar(who) { 
Foo.call( this, who ); 


j 


Bar.prototype - Object.create( Foo.prototype ); 


Bar.prototype.speak = function() { 


alert( "Hello, " + this.identify() + "." ); 
3 
var b1 = new Bar( "b1" ); 
var b2 - new Bar( "b2" ); 


b1.speak(); 
b2.speak(); 


子 类 Bar 继承 了 父 类 Foo， 然 后 生成 了 bi 和 b2 两 个 实例 。b1 委 
委托 了 Foo.prototype。 见 ， 你 应 该 很 熟悉 了 。 





下 











Foo = { 
init: function(who) { 
this.me = who; 
b 
identify: function() { 
return "I am " + this.me; 
J 
E 


Bar - Object.create( Foo ); 


Bar.speak = function() { 
alert( "Hello, " + this.identify() + "." ); 
E 


var b1 = Object.create( Bar 
bi.init( "bt" Js 
var b2 = Object.create( Bar 


— w 
mM m 


ft f Bar.prototype, 


下 我 们 看 看 如 何 使 用 对 象 关 联 风格 来 编写 功能 完全 相同 的 代码 : 


后 者 





b2.init( "b2" ); 


b1.speak(); 
b2.speak(); 


这 段 代 码 中 我 们 同样 利用 EEPrototype]] 把 bl 委托 给 Bar 并 把 Bar 委托 给 Foo， 和 上 一 段 
代码 一 模 一 样 。 我 们 仍然 实现 了 三 个 对 象 之 间 的 关联 。 

但 是 非常 重要 的 一 点 是 ， 这 段 代 码 简洁 了 许多 ， 我 们 只 是 把 对 象 关 联 起 来 ， 并 不 需要 那些 
既 复杂 又 令 人 困惑 的 模仿 类 的 行为 (构造 函数 、 原 型 以 及 new) 。 


间 间 你 自己 :如 果 对 象 关联 风格 的 代码 能 够 实现 类 风格 代码 的 所 有 功能 并 且 更 加 简洁 易 
懂 ， 那 它 是 不 是 比 类 风格 更 好 ? 











下 面 我 们 看 看 两 段 代 码 对 应 的 思维 模型 。 
首先 ， 类 风格 代码 的 思维 模型 强调 实体 以 及 实体 间 的 关系 : 











.Constructor 










.Constructor toString() 
valueOf() 
hasOwnProperty() 






isPrototypeOf() 












. proto - 
[[Prtotypel 


[[ad 人 lolold]] 
0101d 








.Constructor 







. proto - 
[Prototype] 





Jojoni]suoo 







[[adAy0104d]] 
oy01d 







I 

L 属性 /关系 

l [[Prototype]] Æ 
! 托 隐 含 的 关系 
! 

1 

1 

1 

1 

1 


"--------2-2--2-2--2-2-2--2-2--2--2-2------ 





constructor 
._proto_ ._proto_ 
[[Prototype]] [[Prototype]] 


„constructor 
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实际 上 这 张 图 有 点 不 清晰 /误导 人 ， 因 为 它 还 展示 了 许多 技术 角度 不 需要 关注 的 细节 (但 
是 你 必须 理解 它们 ) ! 从 图 中 可 以 看 出 这 是 一 张 十 分 复杂 的 关系 网 。 此 外 ， 如 果 你 跟着 图 
中 的 箭头 走 就 会 发 现 ，JavaScript 机 制 有 很 强 的 内 部 连贯 性 。 



































举例 来 说 ，JavaScript 中 的 函数 之 所 以 可 以 访问 call(..)、apply(..) 和 bind(..) ( 参 
见 第 2 章 )， 就 是 因为 函数 本 身 是 对 象 。 而 函数 对 人 象 同样 有 [[Prototype]] 属性 并 且 关 
联 到 Function.prototype 对 象 ， 因 此 所 有 函数 对 象 都 可 以 通过 委托 调用 这 些 默 认 方法 。 
JavaScript 能 做 到 这 一 点 ， 你 也 可 以 ! 




















好 ， 下 面 我 们 来 看 一 张 简化 版 的 图 ， 它 更 “清晰 ”一 些 一 一 只 展示 了 必要 的 对 象 和 关系 : 























toString() 
valueOf() 
hasOwnProperty() 
isPrototypeOf() 


„prototype 









„constructor proto_ 
[[Prototypel] 


identify() 











Q 函数 
H 对 象 


属性 /关系 


-入 [[Prototype]] Æ 
托 隐 含 的 关系 


[[adAy0101d]] 
ozod 


1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 
1 


„constructor 
~ 


S . proto - 
[[Prtotypel [[Prototype]] 


一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 ~ 


.constructor 











仍然 很 复杂 ， 是 吧 ? 虚线 表示 的 是 Bar.prototype 继承 Foo.prototype 之 后 丢失 的 constructor 
属性 引用 (参见 5.2.3 节 的 “回顾 “构造 函数 ”” aris 它们 还 没有 被 修复 。 即 使 移 除 这 
些 虚 线 ， 这 个 思维 模型 在 你 处 理 对 象 关联 时 仍然 非常 复杂 。 











现在 我 们 看 看 对 


象 关联 风格 代码 的 思维 模型 








Object.prototype 


toString() 
valueOf() 
hasOwnProperty() 
isPrototypeOf() 






. proto - 
[[Prototype]] 






identify() 







图 对 象 


— ERA 


[[adKy0}01d]] 
0lold ^ 


speak() 










.. proto .. proto 
[[Prototype]] ^ [[Prototype]] 














通过 比较 可 以 看 出 ， 对 象 关 联 风格 的 代码 显然 更 加 简洁 ， 因 为 这 种 代码 只 关注 一 件 事 : 对 


象 之 间 的 关联 关 





系 。 





其 他 的 “类 ”技巧 都 是 非常 复杂 并 且 令 人 困惑 的 。 去 掉 它们 之 后 ， 事 情 会 变 得 简单 许多 
(同时 保留 所 有 功能 ) 。 


6.2 ”类 与 对 象 


我 们 已 经 看 到 了 
景 中 如 何 应 用 这 


首先 看 看 Web H 











“类 ”和 “行为 委托 ”在 理论 和 思维 模型 方面 的 区 别 ， 现 在 看 看 在 真实 声 
些 方法 。 














F 发 中 非常 典型 的 一 种 前 端 场景 : 创建 UI 控件 (按钮 、 下 拉 列 表 ， 等 等 )。 
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6.2.4 控件 “类 ” 
你 可 能 已 经 习惯 了 面向 对 象 设计 模式 ， 所 以 很 快 会 想到 一 个 包含 所 有 通用 控件 行为 的 父 类 
(可 能 叫 作 Widget) 和 继承 父 类 的 特殊 控件 子 类 (比如 Button), 


这 里 将 使 用 jQuery 来 操作 DOM 和 CSS， 因 为 这 些 操作 和 我 们 现在 讨论 的 
内 容 没 有 关系 。 这 些 代码 并 不 关注 你 是 否 使 用 ， 或 使 用 哪 种 JavaScript 框架 
(jQuery、Dojo、YUI， 等 等 ) 来 解决 问题 。 








下 面 这 段 代 码 展示 的 是 如 何在 不 使 用 任何 “类 ”辅助 库 或 者 语法 的 情况 下 ， 使 用 纯 
JavaScript 实现 类 风格 的 代码 : 














// 父 类 

function Widget(width,height) { 
this.width = width || 50; 
this.height - height || 50; 
this.$elem = null; 


j 


Widget.prototype.render = function(S$where)[ 
if (this.$elem) { 
this.$elem.css( ( 
width: this.width + "px", 
height: this.height + "px" 
) ).appendTo( $where ); 
} 
}; 


// 子 类 

function Button(width,height,label) { 
// 调用 “super” 构 造 函 数 
Widget.call( this, width, height ); 
this.label - label || "Default"; 


this.Selem = $( "«button»" ).text( this.label ); 
} 


// ik Button "44;&" Widget 
Button.prototype - Object.create( Widget.prototype ); 


// 重 写 render(..) 

Button.prototype.render = function($where) { 
//“super” 调 用 
Widget.prototype.render.call( this, $where ); 
this.Selem.click( this.onClick.bind( this ) ); 





J; 


Button.prototype.onClick = function(evt) { 
console.log( "Button '" + this.label + "' clicked!" ); 





J; 


$( document ).ready( function( 


X 


var Sbody = $( document.body ); 
var btn1 = new Button( 125, 30, "Hello" ); 
var btn2 - new Button( 150, 40, "World" ); 


btni.render( $body ); 
btn2.render( $body ); 


rs 

















在 
它 。 子 类 并 不 会 禁 换 基础 的 render(.. 


可 以 看 到 代码 中 出 现 了 丑陋 的 显 式 


下 向 对 象 设计 模式 中 我 们 需 类 中 定义 基础 的 render(.， 


), Rm A 


WES CRUS AE), 


prototype.render.call 从 “ 子 类 ”方法 中 引用 “ 父 类 ”中 的 基础 方法 。 


ES6 的 class 语 法 糖 
附录 A 会 详细 介绍 ES6 的 class 


现 相同 的 功能 


class Widget { 


语法 糖 ， 不 过 这 里 可 以 简单 介 台 








constructor(width,height) { 
this.width = width || 50; 
this.height - height || 50; 
this.$elem = null; 
} 
render ($where){ 
if (this.$elem) { 
this.$elem.css( { 
width: this.width + "px", 
height: this.height + "px" 
} ).appendTo( $where ); 
} 
} 
} 
class Button extends Widget { 
constructor (width,height, label) { 
super( width, height ); 
this.label = label || "Default"; 


this.$elem = 


} 


render(Swhere) { 
super( $where ); 


$( "«button»" ).text( this.label ); 


this.Selem.click( this.onClick.bind( this ) ); 


} 
onClick(evt) { 
console.log( "Button 


} 


'" + this.label + "' clicked!" ); 


后 在 子 类 中 重 写 


即 通 过 Widget.call 和 Widget. 


召 一 下 如 何 使 用 class 来 实 
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$( document ).ready( function(){ 
var $body = $( document.body ); 
var btn1 = new Button( 125, 30, "Hello" ); 
var btn2 - new Button( 150, 40, "World" ); 


btni.render( Sbody ); 
btn2.render( Sbody ); 
FB 


毫 无 疑问 ， 使 用 ES6 的 class 之 后 ， 上 一 段 代 码 中 许多 丑陋 的 语法 都 不 见 了 ，super(..) 
国 数 棒 极 了 。 (尽管 深入 探究 就 会 发 现 并 不 是 那么 完美 1 ) 


尽管 语法 上 得 到 了 改进 ， 但 实际 上 这 里 并 没有 真正 的 类 ，class 仍然 是 通过 [[Prototype]] 
机 制 实现 的 ， 因 此 我 们 仍然 面临 第 4 章 至 第 6 章 提 到 的 思维 模式 不 匹配 问题 。 附 录 A 会 详 
细 介 绍 ES6 的 class 语法 及 其 实现 细节 ， 我 们 会 看 到 为 什么 解决 语法 上 的 问题 无 法 真正 解 
除 对 于 JavaScript 中 类 的 误解 ， 尽 管 它 看 起 来 非常 像 一 种 解决 办 法 ! 











无 论 你 使 用 的 是 传统 的 原型 语法 还 是 ES6 中 的 新 语法 糖 ， 你 仍然 需要 用 “类 ”的 概念 来 对 
问题 (UI 控件) 进行 建 模 。 就 像 前 几 章 试图 证 明 的 一 样 ， 这 种 做 法 会 为 你 带 来 新 的 麻烦 。 


6.2.2 ”委托 控件 对 象 
下 面 的 例子 使 用 对 象 关联 风格 委托 来 更 简单 地 实现 Widget/Button: 














var Widget = { 
init: function(width,height){ 
this.width = width || 50; 
this.height - height || 50; 
this.Selem = null; 
b} 
insert: function($where){ 
if (this.$elem) { 
this.$elem.css( ( 
width: this.width + "px", 
height: this.height + "px" 
} ).appendTo( $where ); 


} 
h 


var Button - Object.create( Widget ); 


Button.setup = function(width,height,label)[ 
// 委托 调用 
this.init( width, height ); 
this.label - label || "Default"; 





this.Selem = $( "«button»" ).text( this.label ); 
J; 
Button.build = function($where) { 





// 委托 调用 
this.insert( $where ); 
this.$elem.click( this.onClick.bind( this ) ); 
IE 
Button.onClick = function(evt) { 
console.log( "Button '" + this.label + "' clicked!" ); 


h 


$( document ).ready( function(){ 
var S$body = $( document.body ); 


var btn1 = Object.create( Button ); 
btni.setup( 125, 30, "Hello" ); 


var btn2 - Object.create( Button ); 
btn2.setup( 150, 40, "World" ); 


btni.build( $body ); 
btn2.build( $body ); 
y 


使 用 对 象 关 联 风格 来 编写 代码 时 不 需要 把 Widget FH Button 当 作 父 类 和 子 类 。 相 反 ， 
Widget 只 是 一 个 对 象 ， 包 含 一 组 通用 的 函数 ， 任 何 类 型 的 控件 都 可 以 委托 ，Button 同样 只 
是 一 个 对 。( 当 然 ， 它 会 通过 委托 关联 到 Widget | ) 


从 设计 模式 的 角度 来 说 ， 我 们 并 没有 像 类 一 样 在 两 个 对 象 中 都 定义 相同 的 方法 名 
render(..)， 相 反 ， 我 们 定义 了 两 个 更 具 描 述 性 的 方法 名 (insert(..) 和 build(..))。 同 
理 ， 初 始 化 方法 分 别 叫 作 init(..) 和 setup(..)。 











在 委托 设计 模式 中 ， 除 了 建议 使 用 不 相同 并 且 更 具 描 述 性 的 方法 名 之 外 ， 还 要 通过 对 象 关 
联 避 免 丑 陋 的 显 式 伪 多 态 调用 (Widget.call 和 Widget.prototype.render.call)， 代 之 以 
简单 的 相对 委托 调用 this.init(..) 和 this.insert(..)。 


从 语法 角度 来 说 ， 我 们 同样 没有 使 用 任何 构造 函数 、.prototype 或 new， 实 际 上 也 没 必 要 
EHET 





如 果 你 仔细 观察 就 会 发 现 ， 之 前 的 一 次 调用 (var btni = new Button(..)) 现在 变 成 了 
两 次 (var btni = Object.create(Button) 和 btn1.setup(..))。 秆 一 看 这 似乎 是 一 个 缺点 
(需要 更 多 代码 )。 


晶 是 这 一 点 其 实 也 是 对 象 关联 风格 代码 相 比 传统 原型 风格 代码 有 优势 的 地 方 。 为 什么 呢 ? 


使 用 类 构造 函数 的 话 ， 你 需要 (并 不 是 硬性 要 求 ， 但 是 强烈 建议 ) 在 同一 个 步骤 中 实现 构 
造 和 初始 化 。 然 而 ， 在 许多 情况 下 把 这 两 步 分 开 (就 像 对 象 关联 代码 一 样 ) 更 灵活 。 


举例 来 说 ， 假 如 你 在 程序 启动 时 创建 了 一 个 实例 地， 然后 一 直 等 到 实例 被 取出 并 使 用 时 才 
执行 特定 的 初始 化 过 程 。 这 个 过 程 中 两 个 函数 调用 是 挨 着 的 ， 但 是 完全 可 以 根据 需要 让 它 
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们 出 现在 不 同 的 位 置 。 


对 象 关联 可 以 更 好 地 支持 关注 分 离 (separation of concerns). 原则 ， 创 建 和 初始 化 并 不 需要 
合并 为 一 个 步骤 。 


6.3 更 简洁 的 设计 

对 象 关联 除了 能 让 代码 看 起 来 更 简洁 (并 且 更 具 扩 展 性 ) 外 还 可 以 通过 行为 委托 模式 简化 
代码 结构 。 我 们 来 看 最 后 一 个 例子 ， 它 展示 了 对 象 关联 如 何 简化 整体 设计 。 

在 这 个 场景 中 我 们 有 两 个 控制 器 对 象 ， 一 个 用 来 操作 网 页 中 的 登录 表单 ， 另 一 个 用 来 与 服 
务 器 进行 验证 (通信)。 

我 们 需要 一 个 辅助 函数 来 创建 Ajax 通信 。 我 们 使 用 的 是 jQuery (尽管 其 他 框架 也 做 
得 不 错 )， 它 不 仅 可 以 处 理 Ajax 并 且 会 返回 一 个 类 Promise 的 结果 ， 因 此 我 们 可 以 使 
用 .then(..) 来 监听 响应 。 
































文 里 我 们 不 会 介绍 Promise， 但 是 在 本 系列 之 后 的 书 中 会 介绍 。 











在 传统 的 类 设计 模式 中 ， 我 们 会 把 基础 的 函数 定义 在 名 为 Controller 的 类 中 ， 然 后 派生 两 
个 子 类 LoginController 和 AuthController， 它 们 都 继承 自 Controller 并 且 重 写 了 一 些 基 
础 行为 : 

/ 父 类 


function Controller() { 
this.errors = []; 

} 

Controller.prototype.showDialog(title,msg) f 
// 给 用 户 显示 标题 和 消息 





}; 

Controller.prototype.success = function(msg) { 
this.showDialog( "Success", msg ); 

5 

Controller.prototype.failure = function(err) { 
this.errors.push( err ); 
this.showDialog( "Error", err ); 


5, 


/] FX 
function LoginController() ( 
Controller.call( this ); 


} 
// 把 子 类 关联 到 父 类 





LoginController.prototype - 
Object.create( Controller.prototype ); 
LoginController.prototype.getUser = function() { 
return document.getElementById( "login username" ).value; 
IE 
LoginController.prototype.getPassword = function() { 
return document.getElementById( "login password" ).value; 
IE 
LoginController.prototype.validateEntry - function(user,pw) f 
user - user || this.getUser(); 
pw = pw || this.getPassword(); 


if (!(user 8& pw)) { 
return this.failure( 
"Please enter a username & password!" 
J; 
} 
else if (user.length < 5) { 
return this.failure( 
"Password must be 5+ characters!" 
) 
} 


// 如 果 执 行 到 这 里 说 明 通 过 验证 


return true; 

















IE 
// 重 写 基础 的 fatture() 
LoginController.prototype.failure = function(err) { 
//“super” 调 用 
Controller.prototype.failure.call( 
this, 
"Login invalid: 


J 





+ err 
a 


// 子 类 

function AuthController(login) { 
Controller.call( this ); 
// 合成 


this.login = login; 


J 
// 把 子 类 关联 到 父 类 
AuthController.prototype = 
Object.create( Controller.prototype ); 
AuthController.prototype.server = function(url,data) { 
return $.ajax( { 
url: url, 
data: data 
5 
E 
AuthController.prototype.checkAuth = function() { 
var user - this.login.getUser(); 
var pw - this.login.getPassword(); 


if (this.login.validateEntry( user, pw )) { 
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this.server( "/check-auth",1( 
user: user, 
pw: pw 
}) 
.then( this.success.bind( this ) ) 
.fail( this.failure.bind( this ) ); 


} 
J; 
// 重 写 基础 的 success) 
AuthController.prototype.success = function() { 
//“super” 调 用 


Controller.prototype.success.call( this, "Authenticated!" ); 








5 
// 重 写 基础 的 failure() 
AuthController.prototype.failure = function(err) f 
//“super” 调 用 
Controller.prototype.failure.call( 
this, 
"Auth Failed: " + err 








); 
J}; 


var auth = new AuthController(); 
auth.checkAuth( 
// 除了 继承 ， 我 们 还 需要 合成 


new LoginController() 
JE 
所 有 控制 器 共享 的 基础 行为 是 success(..)、faiLure(..) 和 showDialog(..), T Æ 
NEN 和 AuthController 通过 重 写 failure(..) fH success(..) 来 扩展 默认 基础 
类 行为 。 此 外 ， 注 意 AuthController 需要 一 个 LoginController 的 实例 来 和 登录 表单 进行 
交互 ， 因 此 这 个 实例 变 成 了 一 个 数据 属性 。 








男 一 个 需要 注意 的 是 我 们 在 继承 的 基础 上 进行 了 一 些 合成 。AuthController 需要 使 用 
LoginController， 因 此 我 们 实例 化 后 者 (new LoginController()) 并 用 一 个 类 成 员 属 性 
this.login 来 引用 它 ， 这 样 AuthController 就 可 以 调用 LoginController 的 行为 。 





你 可 能 想 让 AuthController 继承 LoginController 或 者 相反 ， 这 样 我 们 就 通 

过 继承 链 实 现 了 真正 的 合成 。 但 是 这 就 是 类 继承 在 问题 领域 建 模 时 会 产生 
的 问题 ， 因 为 AuthController 和 LoginController 都 不 具备 对 方 的 基础 行为 ， 
所 以 这 种 继承 关系 是 不 恰当 的 。 我 们 的 解决 办 法 是 进行 一 些 简 单 的 合成 从 而 
让 它们 既 不 必 互 相继 承 又 可 以 互相 合作 。 
































如 果 你 熟悉 面向 类 设计 ， 你 一 定 会 觉得 以 上 内 容 非 常 亲 切 和 自然 














但 是 ， 我 们 真 的 需要 用 一 个 Controller 父 类 、 两 个 子 类 加 上 合成 来 对 这 个 问题 进行 建 模 
吗 ? 能 不 能 使 用 对 象 关联 风格 的 行为 委托 来 实现 更 简单 的 设计 呢 ? 当然 可 以 ! 








var LoginController = { 
errors: [], 
getUser: function() { 
return document.getElementById( 
"login username" 
).value; 
]， 
getPassword: function() { 
return document.getElementById( 
"login password" 
).value; 
]， 
validateEntry: function(user,pw) ( 
user - user || this.getUser(); 
pw = pw || this.getPassword(); 


if (!(user && pw)) { 
return this.failure( 
"Please enter a username & password!" 
E 
} 
else if (user.length < 5) { 
return this.failure( 
"Password must be 5+ characters!" 
); 
} 


// 如 果 执 行 到 这 里 说 明 通过 验证 


return true; 














3 
showDialog: function(title,msg) { 


// 给 用 户 显示 标题 和 消息 





]， 
failure: function(err) ( 
this.errors.push( err ); 
this.showDialog( "Error", "Login invalid: " + err ); 
} 
E 
// 让 AuthController 委托 LoginController 
var AuthController - Object.create( LoginController ); 


AuthController.errors = []; 
AuthController.checkAuth = function() f 
var user - this.getUser(); 
var pw - this.getPassword(); 


if (this.validateEntry( user, pw )) { 
this.server( "/check-auth",[ 
user: user, 
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pw: pw 
2 
.then( this.accepted.bind( this ) ) 
.fail( this.rejected.bind( this ) ); 
} 
I 
AuthController.server = function(url,data) { 
return $.ajax( { 
url: url, 
data: data 
» 
J; 
AuthController.accepted = function() { 
this.showDialog( "Success", "Authenticated!" ) 
J; 
AuthController.rejected = function(err) { 
this.failure( "Auth Failed: " + err ); 


, 








由 于 AuthController 只 是 一 个 对 象 (LoginController 也 一 样 )， 因 此 我 们 不 需要 实例 化 
(比如 new AuthController())， 只 需要 一 行 代码 就 行 : 


AuthController.checkAuth(); 





借助 对 象 关 联 ， 你 可 以 简单 地 向 委托 链 上 添加 一 个 或 多 个 对 象 ， 而 且 同 样 不 需要 实例 化 : 


var controller1 
var controller2 


Object.create( AuthController ); 
Object.create( AuthController ); 


在 行为 委托 模式 中 ，AuthController 和 LoginController 只 是 对 象 ， 它 们 之 间 是 兄弟 关系 ， 
并 不 是 父 类 和 子 类 的 关系 。 代 码 中 AuthController 委托 了 LoginController， 反 向 委托 也 


完全 没 问 题 。 





这 种 模式 的 重点 在 于 只 需要 两 个 实体 (LoginController 和 AuthController), ， 而 之 前 的 模 
式 需要 三 个 。 


我 们 不 需要 Controller 基 类 来 “共享 ”两 个 实体 之 间 的 行为 ， 因 为 委托 足以 满足 我 们 需要 
的 功能 。 同 样 ， 前 面 提 到 过 ， 我 们 也 不 需要 实例 化 类 ， 因 为 它们 根本 就 不 是 类 ， 它 们 只 是 
对 象 。 此 外 ， 我 们 也 不 需要 合成 ， 因 为 两 个 对 象 可 以 通过 委托 进行 合作 。 


最 后 ， 我 们 避免 了 面向 类 设计 模式 中 的 多 态 。 我 们 在 不 同 的 对 象 中 没有 使 用 相同 的 函 
数 名 success(..) 和 failure(..)， 这 样 就 不 需要 使 用 丑陋 的 显示 伪 多 态 。 相 反 ， 在 
AuthController 中 它们 的 名 字 是 accepted(..) 和 rejected(..) 可 以 更 好 地 描述 它们 的 
行为 。 

总 结 : 我 们 用 一 种 (极其) 简单 的 设计 实现 了 同样 的 功能 ， 这 就 是 对 象 关 联 风格 代码 和 行 
为 委托 设计 模式 的 力量 。 




















6.4 更 好 的 语法 
ES6 的 class 语法 可 以 简洁 地 定义 类 方法 ， 这 个 特性 让 class 乍 看 起 来 更 有 吸引 力 (附录 
A 会 介绍 为 什么 要 避免 使 用 这 个 特性 ) : 

class Foo { 

methodName() ( /* .. */ } 

} 
我 们 终于 可 以 抛弃 定义 中 的 关键 字 function 了 ， 对 所 有 JavaScript 开发 者 来 说 真是 大 快 人 心 ! 
你 可 能 注意 到 了 ， 在 之 前 推荐 的 对 象 关联 语法 中 出 现 了 许多 function, AEREE TIR 
关联 的 简洁 性 。 但 是 实际 上 大 可 不 必 如 此 | 

















在 ES6 中 我 们 可 以 在 任意 对 象 的 字面 形式 中 使 用 简洁 方法 声明 (concise method 
declaration) ， 所 以 对 象 关联 风格 的 对 象 可 以 这 样 声明 (和 class 的 语法 糖 一 样 ) : 





var LoginController = { 
errors: [], 


Rd 4 // 妈妈 再 也 不 用 担心 代码 里 有 function 了 ! 
Il. 


]， 
getPassword() { 


} 
Hi 





准 一 的 区 别 是 对 象 的 字面 形式 仍然 需要 使 用 “,” 来 分 隔 元 素 ， 而 class 语法 不 需要 。 这 个 
区 别 对 于 整体 的 设计 来 说 无 关 紧 要 。 

此 外 ， 在 ES6 中， 你 可 以 使 用 对 象 的 字面 形式 (这 样 就 可 以 使 用 简洁 方法 定义 ) 来 
改写 之 前 繁琐 的 属性 赋值 语法 (比如 AuthCcontroller 的 定义 )， 然 后 用 object. 
setPrototypeOf(..) 来 修改 它 的 [[Prototype]]: 





























// 使 用 更 好 的 对 象 字 面 形 式 语 法 和 简洁 方法 
var AuthController = { 
errors: [], 
checkAuth() { 
PP RT 
]， 
server(url,data) { 


[ME 
J 


Hoe. 
J 


// 现在 把 AuthController 关联 到 LoginController 
Object.setPrototypeOf( AuthController, LoginController ); 
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使 用 ES6 的 简洁 方法 可 以 让 对 象 关联 风格 更 加 人 性 化 〈 并 且 仍 然 比 典型 的 原型 风格 代码 更 
加 简洁 和 优秀 ) 。 你 完全 不 需要 使 用 类 就 能 享受 整洁 的 对 象 语法 ! 





反 词 法 
简洁 方法 有 一 个 非常 小 但 是 非常 重要 的 缺点 。 思 考 下 面 的 代码 ， 
var Foo - ( 
bar() { /*..*/ ] 


baz: function baz() t 5A g 
E 


去 掉 语法 糖 之 后 的 代码 如 下 所 示 : 


var Foo = ( 
bar: function() ( /*..*/ }, 
baz: function baz() ( /*..*/ ) 
J; 
看 到 区 别 了 吗 ? 由 于 函数 对 象 本 身 没有 名 称 标 识 符 ， 所 以 bar() 的 缩写 形式 
(function()..) 实际 上 会 变 成 一 个 匿名 函数 表达 式 并 赋值 给 bar 属性 。 相 比 之 下 ， 具 名 函 
数 表达 式 (function baz()..) 会 额外 给 .baz 属性 附加 一 个 词法 名 称 标 识 符 baz, 














然后 呢 ? 在 本 书 第 一 部 分 “作用 域 和 闲 包 ”中 我 们 分 析 了 匿名 函数 表达 式 的 三 大 主要 缺 
点 ， 下 面 我 们 会 简单 介绍 一 下 这 三 个 缺点 ， 然 后 和 简洁 方法 定义 进行 对 比 。 

匿名 函数 没有 name 标识 符 ， 这 会 导致 : 

l. VADO SOROR ER; 

2. 自我 引用 (递归 、 事 件 (解除 ) 绑 定 ， 等 等 ) WOW, 

3. 代码 〈 稍 微 ) 更 难 理解 。 

简洁 方法 没有 第 1 和 第 3 个 缺点 。 

去 掉 语法 糖 的 版 本 使 用 的 是 匿名 耳 数 表达 式 ， 通 常 来 说 并 不 会 在 追踪 栈 中 添加 name， 但 是 
简洁 方法 很 特殊 ， 会 给 对 应 的 函数 对 象 设置 一 个 内 部 的 name 属性 ， 这 样 理论 上 可 以 用 在 追 
踪 栈 中 。(〈 但 是 追踪 的 具体 实现 是 不 同 的 ， 因 此 无 法 保证 可 以 使 用 。) 



































很 不 幸 ， 简 洁 方法 无 法 避免 第 2 个 缺点 ， 它 们 不 具备 可 以 自我 引用 的 词法 标识 符 。 思 考 下 
面 的 代码 : 


var Foo = ( 
bar: function(x) { 
if(x«10)( 
return Foo.bar( x * 2 ); 





return x; 
Fz 
baz: function baz(x) { 
if(x < 10){ 
return baz( x * 2 ); 


return X; 
J} 


在 本 例 中 使 用 Foo.bar(x*2) 就 足够 了 ， 但 是 在 许多 情况 下 无 法 使 用 这 种 方法 ， 比 如 多 个 对 
象 通过 代理 共享 国 数 、 使 用 this 绑 定 ， 等 等 。 这 种 情况 下 最 好 的 办 法 就 是 使 用 函数 对 象 的 
nane 标识 符 来 进行 真正 的 自我 引用 。 








使 用 简 尘 方法 时 一 定 要 小 心 这 一 点 。 如 果 你 需要 自我 引用 的 话 ， 那 最 好 使 用 传统 的 具名 函 
数 表 达 式 来 定义 对 应 的 函数 ( baz: function baz(){..}. ), 不 要 使 用 简洁 方法 。 


65 ”内 省 


如 果 你 写 过 许多 面向 类 的 程序 (无 论 是 使 用 JavaScript 还 是 其 他 语言 )， 那 你 可 能 很 熟悉 自 
省 。 自 省 就 是 检查 实例 的 类 型 。 类 实例 的 自省 主要 目的 是 通过 创建 方式 来 判断 对 象 的 结构 
和 功能 。 











下 面 的 代码 使 用 instanceof (参见 第 5 章 ) 来 推测 对 和 象 al 的 功能 : 


function Foo() { 
LI s 


J 

Foo.prototype.something = function()f 
I iss 

} 


var al = new Foo(); 
// 之 后 


if (al instanceof Foo) { 
al.something(); 


} 
为 Foo.prototype (不 是 Foo 1 ) 在 al 的 [[Prototype]] 链 上 (参见 第 5 章 )， 所 以 
instanceof 操作 (会 令 人 困惑 地 ) 告诉 我 们 al 是 Foo“ 类 ”的 一 个 实例 。 知 道 了 这 点 后 ， 
我 们 就 可 以 认为 al 有 Foo“ 类 ”描述 的 功能 。 





当然 ，Foo 类 并 不 存在 ， 只 有 一 个 普通 的 国 数 Foo， 它 引用 了 al 委托 的 对 象 (Foo. 
prototype) 。 从 语法 角度 来 说 ，instanceof 似乎 是 检查 al 和 Foo 的 关系 ， 但 是 实际 上 它 想 
说 的 是 al 和 Foo.prototype (引用 的 对 象 ) 是 互相 关联 的 。 
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instanceof 语法 会 产生 语义 困惑 而 且 非 常 不 直观 。 如 果 你 想 检 查 对 象 a1 和 某 个 对 象 的 关 
系 ， 那 必须 使 用 另 一 个 引用 该 对 象 的 函数 才 行 一 一 你 不 能 直接 判断 两 个 对 象 是 否 关联 。 





还 记得 本 章 之 前 介绍 的 抽象 的 Foo/Bar/b1 例子 吗 ， 简 单 来 说 是 这 样 的 : 


function Foo() { /* .. */ ) 
Foo.prototype... 


function Bar() { /* .. */ ) 
Bar.prototype - Object.create( Foo.prototype ); 


var b1 = new Bar( "b1" ); 


如 果 要 使 用 instanceof 和 .prototype 语义 来 检查 本 例 中 实体 的 关系 ， 那 必须 这 样 做 : 





// 让 Foo 和 Bar 互相 关联 
Bar.prototype instanceof Foo; // true 
Object.getPrototypeOf( Bar.prototype ) 

=== Foo.prototype; // true 
Foo.prototype.isPrototypeOf( Bar.prototype ); // true 


// 让 b1 关联 到 Foo 和 Bar 

b1 instanceof Foo; // true 

b1 instanceof Bar; // true 

Object.getPrototypeOf( b1 ) === Bar.prototype; // true 
Foo.prototype.isPrototypeOf( b1 ); // true 
Bar.prototype.isPrototypeOf( b1 ); // true 


显然 这 是 一 种 非常 粳 粒 的 方法 。 举 例 来 说 ，( 使 用 类 时 ) 你 最 直观 的 想法 可 能 是 使 用 Bar 
instanceof Foo (因为 很 容易 把 “实例 ”理解 成 “继承 ”)， 但 是 在 JavaScript 中 这 是 行 不 通 
的 ， 你 必须 使 用 Bar.prototype instanceof Foo, 





还 有 一 种 常见 但 是 可 能 更 加 脆弱 的 内 省 模式 ， 许 多 开发 者 认为 它 比 instanceof 更 好 。 这 
种 模式 被 称 为 “鸭子 类 型 "*。 这 个 术语 源 自 这 句 格 言 “ 如 果 看 起 来 像 蝎 子 ， 叫 起 来 像 网 子 ， 
那 就 一 定 是 鸭子 。 


举例 来 说 : 




















if (al.something) { 
al.something(); 
} 


我 们 并 没有 检查 al 和 委托 something() 国 数 的 对 象 之 间 的 关系 ， 而 是 假设 如 果 al 通过 了 
测试 al.something 的 话 ， 那 al 就 一 定 能 调用 .something() (无 论 这 个 方法 存在 于 al 自身 
还 是 委托 到 其 他 对 象 ) 。 这 个 假设 的 风险 其 实 并 不 算 很 高 。 


但 是 “鸭子 类 型 ”通常 会 在 测试 之 外 做 出 许多 关于 对 象 功 能 的 假设 ， 这 当然 会 带 来 许多 风 
险 (或 者 说 脆弱 的 设计 )。 




















ES6 的 Promise 就 是 典型 的 “鸭子 类 型 ”( 之 前 解释 过 ， 本 书 并 不 会 介绍 Promise), 


出 于 各 种 各 样 的 原因 ， 我 们 需要 判断 一 个 对 象 引用 是 否 是 Promise， 但 是 判断 的 方法 是 检 
查 对 象 是 否 有 then() 方法 。 换 句 话 说， 如 果 对 象 有 then() 方法 ，ES6 的 Promise 就 会 认为 
这 个 对 象 是 “可 持续 ”(thenable) 的 ， 因 此 会 期 望 它 具 有 Promise 的 所 有 标准 行为 。 


























如 果 有 一 个 不 是 Promise 但 是 具有 then() 方法 的 对 象 ， 那 你 千 万 不 要 把 它 用 在 ES6 的 
Promise 机 制 中 ， 否 则 会 出 错 。 

这 个 例子 清楚 地 解释 了 “鸭子 类 型 ”的 和 危害。 你 应 该 尽量 避免 使 用 这 个 方法 ， 即 使 使 用 也 
要 保证 条 件 是 可 控 的 。 

现在 回 到 本 章 想 说 的 对 象 关联 风格 代码 ， 其 内 省 更 加 简洁 。 我 们 先 来 回顾 一 下 之 前 的 Foo/ 
Bar/bl 对 象 关联 例子 (只 包含 关键 代码 ) : 








— 


var Foo = ( /* .. */ 5 


var Bar - Object.create( Foo ); 
Bar... 


var b1 = Object.create( Bar ); 
使 用 对 象 关 联 时 ， 所 有 的 对 象 都 是 通过 [[Prototype]] 委托 互相 关联 ， 下 面 是 内 省 的 方法 ， 
非常 简单 ; 

// 让 Foo fll Bar 互相 关联 


Foo.isPrototypeOf( Bar ); // true 
Object.getPrototypeOf( Bar ) --- Foo; // true 








// 让 b1 关联 到 Foo 和 Bar 

Foo.isPrototypeOf( b1 ); // true 
Bar.isPrototypeOf( b1 ); // true 
Object.getPrototypeOf( b1 ) === Bar; // true 


我 们 没有 使 用 instanceof ， 因 为 它 会 产生 一 些 和 类 有 关 的 误解 。 现 在 我 们 想 问 的 问题 是 
“你 是 我 的 原型 吗 ? ”我 们 并 不 需要 使 用 间接 的 形式 ， 比 如 Foo.prototype 或 者 繁琐 的 Foo. 
prototype.isPrototypeOf(..), 





我 觉得 和 之 前 的 方法 比 起 来 ， 这 种 方法 显然 更 加 简洁 并 且 清 晰 。 再 说 一 次 ， 我 们 认为 
JavaScript 中 对 象 关联 比 类 风格 的 代码 更 加 简洁 (而 且 功 能 相同 )。 
6.6 小结 


在 软件 架构 中 你 可 以 选择 是 否 使 用 类 和 继承 设计 模式 。 大 多 数 开发 者 理所当然 地 认为 类 是 
唯一 (合适) 的 代码 组 织 方式 ， 但 是 本 章 中 我 们 看 到 了 另 一 种 更 少见 但 是 更 强大 的 设计 模 
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X: 行为 委托 。 


行为 委托 认为 对 象 之 间 是 兄弟 关系 ， 互 相 委 托 ， 而 不 是 父 类 和 子 类 的 关系 。JavaScript 的 
[[Prototype]] 机 制 本 质 上 就 是 行为 委托 机 制 。 也 就 是 说 ， 我 们 可 以 选择 在 JavaScript 中 努 
力 实 现 类 机 制 (参见 第 4 和 第 5 章 )， 也 可 以 拥抱 更 自然 的 [[Prototype]] 委托 机 制 。 








当 你 只 用 对 象 来 设计 代码 时 ， 不 仅 可 以 让 语法 更 加 简洁 ， 而 且 可 以 让 代码 结构 更 加 清晰 。 


对 象 关联 〈 对 象 之 前 互相 关联 ) 是 一 种 编码 风格 ， 它 倡导 的 是 直接 创建 和 关联 对 象 ， 不 把 
它们 抽象 成 类 。 对 象 关 联 可 以 用 基于 [[Prototype]] 的 行为 委托 非常 自然 地 实现 。 








附录 人 A 
ES6 中 的 Class 





可 以 用 一 句 话 总 结 本 书 的 第 二 部 分 (第 4 章 至 第 6 章 ) : 类 是 一 种 可 选 ( 而 不 是 必须 ) 的 
设计 模式 ， 而 且 在 JavaScript 这 样 的 [[Prototype]] 语言 中 实现 类 是 很 别扭 的 。 








这 种 别扭 的 感觉 不 只 是 来 源 于 语法 ， 虽 然 语法 是 很 重要 的 原因 。 第 4 章 和 第 5 章 介 绍 了 许 
多 语法 的 缺点 : 繁琐 杂乱 的 .prototype 引用 、 试 图 调用 原型 链 上 层 同 名 函数 时 的 显 式 伪 多 
态 (参见 第 4 章 ) 以 及 不 可 靠 、 不 美观 而 且 容 易 被 误解 成 “构造 函数 ”的 .constructor。 




















除 此 之 外 ， 类 设计 其 实 还 存在 更 次 刻 的 问题 。 第 4 章 指出 ， 传 统 面向 类 的 语言 中 父 类 和 子 
类 、 子 类 和 实例 之 间 其 实 是 复制 操作 ， 但 是 在 [[Prototype]] 中 并 没有 复制 ， 相 反 ， 它 们 
之 间 只 有 委托 关联 。 


对 象 关联 代码 和 行为 委托 (参见 第 6 章 ) 使 用 了 [[Prototype]] 而 不 是 将 它 藏 起 来 ， 对 比 
其 简洁 性 可 以 看 出 ， 类 并 不 适用 于 JavaScript. 

















A.1 class 


不 过 我 们 并 不 需要 再 纠结 于 这 个 问题 ， 这 里 提 到 只 是 让 你 简单 回忆 一 下 ， 现 在 我 们 来 看 看 
ES6 的 class 机 制 。 我 们 会 介绍 它 的 工作 原理 并 分 析 class 是 否 改进 了 之 前 提 到 的 那些 缺点 。 











首先 回顾 一 下 第 6 章 中 的 Widget/Button 例子 : 


class Widget { 
constructor(width,height) { 
this.width - width || 50; 
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this.height - height || 50; 
this.Selem = null; 


render ($where){ 
if (this.$elem) { 
this.$elem.css( { 
width: this.width + "px", 
height: this.height + "px" 
} ).appendTo( $where ); 


} 


class Button extends Widget { 
constructor (width,height, label) { 
super( width, height ); 
this.label = label || "Default"; 
this.$elem = $( "<button>" ).text( this.label ); 


render(Swhere) { 
super( $where ); 
this.$elem.click( this.onClick.bind( this ) ); 


onClick(evt) { 
console.log( "Button '" + this.label + "' clicked!" ); 
} 
} 


除了 语法 更 好 看 之 外 ，ES6 还 解决 了 什么 问题 呢 ? 





1. (基本 上 ， 下 面 会 详细 介绍 ) 不 再 引用 杂乱 的 .prototype T, 

2. Button 声明 时 直接 “ ‘继承 ” 了 Widget， 不 再 需要 通过 Object.create(..) 3k 4E 
换 . i 对 象 ， 也 不 需要 设置 .__proto__ 或 者 0bject.setPrototype0f(..)。 

3. 可 以 通过 super(..) 来 实现 相对 多 态 ， 这 样 任何 方法 都 可 以 引用 原型 链 上 层 的 同名 方 
法 。 这 可 以 解决 第 4 章 提 到 过 的 那个 问题 : 构造 函数 不 属于 类 ， 所 以 无 法 互相 引用 一 一 
super() 可 以 完美 解决 构造 函数 的 问题 。 

4. class 字面 语法 不 能 声明 属性 (只 能 声明 方法 )。 看 起 来 这 是 一 种 限制 ， 但 是 它 会 排除 
掉 许 多 不 好 的 情况 ， 如 果 没 有 这 种 限制 的 话 ， 原 型 链 末 端的 “实例 ”可 能 会 意外 地 获取 
其 他 地 方 的 属性 (这 些 属性 隐 式 被 所 有 “实例 ”所 “共享 ")。 所 以 ，class 语法 实际 上 
可 以 帮助 你 避免 犯错 。 

5. 可 以 通过 extends 很 自然 地 扩展 对 象 (FT) 类 型 ， 黄 至 是 内 置 的 对 象 ( 子 ) 类 型 ， 比 如 
Array 或 RegExp。 没 有 class ..extends 语法 时 ， 想 实现 这 一 点 是 非常 困难 的 ， 基 本 上 
只 有 框架 的 作者 才能 搞 清楚 这 一 点 。 但 是 现在 可 以 轻而易举 地 做 到 | 


平 心 而 论 ，class 语法 确实 解决 了 典型 原型 风格 代码 中 许多 显而易见 的 (语法 ) 问题 和 
缺点 。 
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A.2 class pt 


然而 ，class 语法 并 没有 解决 所 有 的 问题 ， 在 JavaScript 中 使 用 “类 ”设计 模式 仍然 存在 许 
多 深层 问题 。 








首先 ， 你 可 能 会 认为 ES6 的 class 语法 是 向 JavaScript 中 引入 了 一 种 新 的 “类 ”机 制 ， 其 
实 不 是 这 样 。class 基本 上 只 是 现 有 [[Prototype]] (委托 ! ) 机 制 的 一 种 语法 糖 。 




















也 就 是 说 ，ctass 并 不 会 像 传 统 面向 类 的 语言 一 样 在 声明 时 静态 复制 所 有 行为 。 如 果 你 
(有 意 或 无 意 ) 修改 或 者 替换 了 父 “ 类 ”中 的 一 个 方法 ， 那 子 “ 类 ”和 所 有 实例 都 会 受到 
影响 ， 因 为 它们 在 定义 时 并 没有 进行 复制 ， 只 是 使 用 基于 [[Prototype]] 的 实时 委托 : 





class C ( 
constructor() { 
this.num - Math.random(); 


} 
rand() { 


console.log( "Random: " + this.num ); 
} 


} 


var c1 = new C(); 
ci.rand(); // "Random: 0.4324299..." 


C.prototype.rand = function() { 
console.log( "Random: " + Math.round( this.num * 1000 )); 
IE 


var C2 - new C(); 
c2.rand(); // "Random: 867" 


ci.rand(); // "Random: 432" 一 一 响 | 


如 果 你 已 经 明白 委托 的 原理 所 以 并 不 会 期 望 得 到 “类 ”的 副本 的 话 ， 那 这 种 行为 才 看 起 来 
比较 合理 。 所 以 你 需要 问 自己 : 为 什么 要 使 用 本 质 上 不 是 类 的 class 语法 呢 ? 






































ES6 中 的 class 语法 不 是 会 让 传统 类 和 委托 对 象 之 间 的 区 别 更 加 难以 发 现 和 理解 吗 ? 




















class 语法 无 法 定义 类 成 员 属 性 (只 能 定义 方法 )， 如 果 为 了 跟踪 实例 之 间 共 享 状态 必须 要 
这 么 做 ， 那 你 只 能 使 用 丑陋 的 ,prototype 语法 ， 像 这 样 : 





class C f 
constructor() { 
// 确保 修改 的 是 共享 状态 而 不 是 在 实例 上 创建 一 个 屏蔽 属性 ! 


C.prototype.count++; 





// this.count 可 以 通过 委托 实现 我 们 想 要 的 功能 
console.log( "Hello: " + this.count ); 


} 
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// 直接 向 prototype 对 象 上 添加 一 个 共享 状态 
C.prototype.count = 0; 


var c1 - new C(); 
// Hello: 1 


var C2 - new C(); 


// Hello: 2 
ci.count === 2; // true 
ci.count === c2.count; // true 


ix BR A AKH E, eE A T class EARE, 在 实现 中 暴露 (泄露 ! ) 
了 .prototype, 




















如 果 使 用 this.counte- 的 话 ， 我 们 会 很 惊讶 地 发 现在 对 象 c1 和 c2 上 都 创建 了 .count 属 
性 ， 而 不 是 更 新 共享 状态 。class 没有 办 法 解决 这 个 问题 ， 并 且 干 脆 就 不 提供 相应 的 语法 
支持 ， 所 以 你 根本 就 不 应 该 这 样 做 。 











此 外 ，class 语法 仍然 面临 意外 屏蔽 的 问题 : 











class C{ 
constructor(id) { 
// 噢 ， 郁 间 ， 我 们 的 id 属性 屏蔽 了 id() 方法 
this.id = id; 





} 
id() { 

console. log( "Id: " + id ); 
} 


} 


var c1 = new C( "ci" ); 

ci.id(); // TypeError -- c1.id 现在 是 字符 串 "ci" 
除 此 之 外 ，super 也 存在 一 些 非常 细微 的 问题 。 你 可 能 认为 super 的 绑 定 方法 和 this 类 似 
(参见 第 2 章 )， 也 就 是 说 ， 无 论 目前 的 方法 在 原型 链 中 处 于 什么 位 置 ，super 总 会 绑 定 到 
链 中 的 上 一 层 。 





然而 ， 出 于 性 能 考虑 (this 绑 定 已 经 是 很 大 的 开销 了 ) ，super 并 不 是 动态 绑 定 的 ， 它 会 在 
声明 时 “静态 ” 绑 定 。 没 什么 大 不 了 的 ， 是 吧 ? 

呢 …… 可 能 ， 可 能 不 是 这 样 。 如 果 你 和 大 多 数 JavaScript 开发 者 一 样 ， 会 用 许多 不 同 的 方 
法 把 函数 应 用 在 不 同 的 (使 用 class 定义 的 ) 对 象 上 ， 那 你 可 能 不 知道 ， 每 次 执行 这 些 操 
作 时 都 必须 重新 绑 定 super。 


此 外 ， 根 据 应 用 方式 的 不 同 ，super 可 能 不 会 绑 定 到 合适 的 对 象 (至 少 和 你 想 的 不 一 样 )， 
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所 以 你 可 能 (写作 本 书 时 ，TC39 正在 讨论 这 个 话题 ) 需要 用 toMethod(..) 来 手动 绑 定 
super (类 似 用 bind(..) RHE this 一 一 参见 第 2 章 )。 





你 已 经 习惯 了 把 方法 应 用 到 不 同 的 对 象 上 ， 从 而 可 以 自动 利用 this 的 隐 式 绑 定 规则 (参见 
第 2 章 )。 但 是 这 对 于 super 来 说 是 行 不 通 的 。 





思考 下 面 代码 中 super 的 行为 (D 和 E 上 ) : 











class P ( 
foo() { console.log( "P.foo" ); ) 
} 


class C extends P ( 
foo() ( 


super(); 
} 


var C1 = new C(); 
c1.foo(); // "P.foo" 


var D={ 
foo: function() { console.log( "D.foo" ); } 
IE 
var E- { 
foo: C.prototype.foo 
IE 


// d E HFI] D 
Object.setPrototypeOf( E, D ); 


E.foo(); // "P.foo" 








如 果 你 认为 super 会 动态 绑 定 (非常 合理 ! )， 那 你 可 能 期 望 super) 会 自动 识别 出 E 委托 
TD, PELA E.foo() 中 的 super() 应 该 调用 D.foo()。 








但 事实 并 不 是 这 样 。 出 于 性 能 考虑 ，super 并 不 像 this 一 样 是 晚 绑 定 (late bound， 或 者 说 
动态 绑 定 ) 的 ， 它 在 [[Home0bject]].[[Prototype]] 上 ，[[Home0bject]] 会 在 创建 时 静态 
绑 定 。 





在 本 例 中 ，super() 会 调用 P.foo()， 因 为 方法 的 [[Home0bject]] 仍然 是 5，C.[[Prototype]] 


AE P. 





确实 可 以 手动 修改 super 绑 定 ， 使 用 toMethod(..) 绑 定 或 重新 绑 定 方法 的 [[Home0bject]] 
(就 像 设 置 对 象 的 [[Prototype]] 一 样 ! ) 就 可 以 解决 本 例 的 问题 : 





var D= { 
foo: function() { console.log( "D.foo" ); } 
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// 把 E 委 托 到 D 
var E = Object.create( D ); 


// 手动 把 foo 的 [[HomeObject]] Zpzz sj E, E.[[Prototype]] 是 D， 所 以 super() 是 D.foo() 
E.foo = C.prototype.foo.toMethod( E, "foo" ); 


E.foo(); // "D.foo" 


E 会 复制 方法 并 把 homeobject 当 作 第 一 个 参数 〈 也 就 是 我 们 传人 
的 E)， Een (可 选 ) 是 新 方法 的 名 称 (默认 是 原 方法 名 )。 

















除 此 之 外 ， 开 发 者 还 有 可 能 会 遇 到 其 他 问题 ， 这 有 待 观察 。 无 论 如 何 ， 对 于 引擎 自动 绑 定 
的 super 来 说 ， 你 必须 时 刻 警 惕 是 否 需要 进行 手动 绑 定 。 唉 ! 


A.3 静态 大 于 动态 吗 


通过 上 面 的 这 些 特性 可 以 看 出 ，ES6 的 class 最 大 的 问题 在 于 ，( 像 传统 的 类 一 样 ) 它 的 语 
法 有 时 会 让 你 认为 ， 定 义 了 一 个 class 后 ， 它 就 变 成 了 一 个 (未 来 会 被 实例 化 的 ) 东西 的 
静态 定义 。 你 会 彻底 名 略 C 是 一 个 对 象 ， 是 一 个 具体 的 可 以 直接 交互 的 东西 。 


在 传统 面向 类 的 语言 中 ， 类 定义 之 后 就 不 会 进行 修改 ， 所 以 类 的 设计 模式 就 不 支持 修改 。 
但 是 JavaScript 最 强大 的 特性 之 一 就 是 它 的 动态 性 ， 任 何 对 象 的 定义 都 可 以 修改 〈 除 非 你 
把 它 设置 成 不 可 变 )。 























class 似乎 不 赞成 这 样 做 ， 所 以 强制 让 你 使 用 丑陋 的 -prototype 语法 以 及 super 问题 ， 等 
等 。 而 且 对 于 这 种 动态 产生 的 问题 ，class 基本 上 都 没有 提供 解决 方案 。 


换 旬 话说，class 似乎 想 告诉 你 :“ 动 态 太 难 实现 了 ， 所 以 这 可 能 不 是 个 好 主意 。 这 里 有 一 
种 看 起 来 像 静 态 的 语法 ， 所 以 编写 静态 代码 吧 。 


对 于 JavaScript 来 说 这 是 多 么 悲伤 的 评论 啊 : 动态 太 难 实现 了 ， 我 们 假装 成 静态 吧 。( 但 是 
实际 上 并 不 是 ! ) 














总 地 来 说 ，ES6 的 class 想 伪装 成 一 种 很 好 的 语法 问题 的 解决 方案 ， 但 是 实际 上 却 让 问题 
更 难 解决 而 且 让 JavaScript 更 加 难以 理解 。 
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如 果 你 使 用 .bind(..) 函数 来 硬 绑 定 函 数 (参见 第 2 章 )， 那 么 这 个 函数 不 会 
像 普通 函数 那样 被 ES6 的 extend 扩展 到 子 类 中 。 


























A.4 小 结 


class 很 好 地 伪装 成 JavaScript 中 类 和 继承 设计 模式 的 解决 方案 ， 但 是 它 实际 上 起 到 了 反 作 
H: 它 隐 藏 了 许多 问题 并 且 带 来 了 更 多 更 细小 但 是 危险 的 问题 。 





class JRR TIEK 20 年 中 对 于 JavaScript 中 “类 ”的 误解 ， 在 革 些 方面 ， 它 产生 的 问题 比 
解决 的 多 ， 而 且 让 本 来 优雅 简洁 的 [[Prototype]] 机 制 变 得 非常 别扭。 


结论 : 如 果 ES6 的 class 让 [[Prototype]] 变 得 更 加 难 用 而 且 隐 藏 了 JavaScript 对 象 最 重要 
的 机 制 一 一 对 象 之 间 的 实时 委托 关联 ， 我 们 难道 不 应 该 认为 class 产生 的 问题 比 解决 的 多 
吗 ? 难道 不 应 该 抵制 这 种 设计 模式 吗 ? 





我 无 法 禁 你 回答 这 些 问题 ,但 是 我 希望 本 书 能 从 前 所 未 有 的 深度 分 析 这 些 问 题 ， 并且 能 够 
为 你 提供 回答 问题 所 需 的 所 有 信息 。 








ES6 中 的 Class | 195 





版 权 声 明 


© 2014 by O'Reilly Media,Inc. 


Simplified Chinese Edition, jointly published by O'Reilly Media, Inc. and Posts & Telecom 
Press, 2015. Authorized translation of the English edition, 2014 O'Reilly Media,Inc.,the 


owner of all rights to publish and sell the same. 
All rights reserved including the rights of reproduction in whole or in part in any form. 
英文 原版 由 O"?Reilly Media, Inc. 出 版 ，2014。 


简体 中 文 版 由 人 民 邮 电 出 版 社 出 版 ， 201$5。 英 文 原版 的 翻译 得 到 O^ Reilly Media, Inc. 
的 授权 。 此 简体 中 文 版 的 出 版 和 销售 得 到 出 版 权 和 销售 权 的 所 有 者 — O’ Reilly 
Media,Inc. 的 许可 。 





版 权 所 有 ， 未 得 书面 许可 ， 本 书 的 任何 部 分 和 全 部 不 得 以 任何 形式 重 制 。 





关注 图 灵 教 育 关注 图 灵 社 区 
iTuring.cn 


在 线 出 版 电子 书 《 码 农 》 杂志 图 灵 访谈 …… 














e 


QQ 联系 我 们 


读者 QQ 和 群 ，218139230 


p 


一 一 一 一 微 博 联系 我 们 


























官方 账号 : @ 图 灵 教育 @ 图 灵 社 区 @ 图 灵 新 知 
市 场合 作 ，@ 图 灵 喜 野 

写作 本 版 书 : @ 图 灵 小 花 

翻译 英文 书 ，@ 李 松 峰 @ 朱 痢 ituring @ 楼 伟 珊 
翻译 日 文书 或 文章 ，@ 图 灵 乐 遍 

PAHLE. ORRAK 
电子 书 合 作 : Qhi jeanne 

图 灵 访 谈 /《 码 农 》 杂 志 : @ 李 盼 ituring 
加 入 我 们 ，@ 王 子 是 好 人 


Ta 


一 一 一 一 微 信 联 系 我 们 






























































图 灵 教 育 图 灵 访 谈 


turingbooks ituring_interview 


“Ky[le 对 JavaSctript 语 言 每 二 个 细节 的 纺 密 思考 方式 ; 
会 潜移默化 地 移植 到 我 们 的 头脑 和 和 日常 王 作 流程 当 申 <? 
— Shane Hudson. BRBRBIJE ACE 


“原型 使 JavaScript 语 言 功 能 强大 ;但 也 令 开 发 大 员 备 感 困惑 ; 
本 书 第 三 部 分 this 和 对 象 原型 精妙 地 解释 子 原 型: 
gbkaTJavaScripttR ^38" BONES. 

—-—pavid Walsh; MozillaB] m 1 f Uff 


你 不 知道 的 JavaScript -x 


JavaScript 语 言 有 很 多 复杂 的 概念 ， 但 却 用 简单 的 方式 体现 出 来 (比如 回调 函数 ) ， 因 此 ， 开 发 者 无 需 理 
解 语言 内 部 的 原理 ， 就 能 编写 出 功能 全 面 的 程序 ， 就 像 收 音 机 一 样 ， 你 无 需 理解 里 面 的 管子 和 线圈 都 是 
做 什么 用 的 ， 只 要 会 操作 收音 机 上 的 按键 ， 就 可 以 收听 你 喜欢 的 节目 。 然 而 ，JavaScript 的 这 些 复杂 精妙 
的 概念 才 是 语言 的 精髓 ， 即 使 是 经 验 丰 富 的 JavaScript 开 发 者 ， 如 果 没 有 认真 学 习 也 无 法 真正 理解 语言 
身 的 特性 。 正 是 因为 绝 大 多 数 人 不 求 甚 解 ， 一 遇 到 出 乎 意料 的 行为 就 认为 是 语言 本 身 有 缺陷 ， 进 而 把 相 
关 的 特性 加 入 黑 名 单 ， 久 而 久之 就 排除 了 这 门 语言 的 多 样 性 ， 人 为 地 使 它 变 得 不 完整 、 不 安全 。 
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“你 不 知道 的 JavaScript” 系 列 就 是 要 让 不 求 其 解 的 JavaScript 开 发 者 迎 难 而 上 ， 深 入 语言 内 部 ， 弄 清楚 
JavaScript 每 一 个 零 部 件 的 用 途 。 本 书 介 绍 了 该 系列 的 两 个 主题 “作用 域 和 闭 包 ”以 及 “this 和 对 象 原 
型 ”。 掌 握 了 这 些 知识 之 后 ， 无 论 什么 技术 、 框 架 和 流行 词语 ， 你 都 能 轻松 理解 。 
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